Как я могу подготовить файл Inkscape SVG для гибкого веб-дизайна?

Я занимаюсь учебным курсом по Treehouse по гибкому веб-дизайну. На этом этапе учебника нам предлагается преобразовать изображение в svg, чтобы он мог масштабироваться полностью реагировать.

Вместо использования Adobe Illustrator, которого у меня нет, я использовал бесплатную Inkscape. После преобразования изображения нам предлагается открыть изображение в текстовом редакторе и удалить требования высоты и ширины из объявления svg и добавить селектор объектов к нашему правилу максимальной ширины в наш стиль css:

  img, object {
max-width: 100%;
}

Однако, после удаления высоты и ширины изображение не реагирует, а вместо этого странно обрезается так:

enter image description here

Кто-нибудь знает, какую ошибку я сделал? Или что я должен был удалить?

Извините, если вопрос был задан раньше, я не могу его найти.

edit1, код:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg2985"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   width="319"
   height="177"
   sodipodi:docname="logo.gif">
  <metadata
     id="metadata2991">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs2989" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="640"
     inkscape:window-height="480"
     id="namedview2987"
     showgrid="false"
     inkscape:zoom="0.94984326"
     inkscape:cx="159.5"
     inkscape:cy="88.5"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="0"
     inkscape:current-layer="svg2985" />
  <image
     width="319"
     height="177"
     xlink:href="

Это "высота" и "ширина" в первом теге SVG, который я удалил.

Ответы

Ответ 1

Тот факт, что вы только что разместили растровое изображение в своем SVG, не является фактической причиной того, что вы видите.

Все это означает, что когда масштабирование SVG работает правильно (см. ниже), вы не увидите преимуществ использования векторных работ. Когда вы масштабируете векторные иллюстрации, вы не получаете "jaggies" (блочность), которые вы получаете при масштабировании растровых изображений. Если ваш SVG просто содержит растровое изображение, он почти такой же, как при использовании растрового изображения.

Фактическая проблема заключается в том, что Inkscape не включает атрибут viewBox в сохраняемые SVG файлы.

При удалении атрибутов "ширина" и "высота" они по умолчанию "100%". Это говорит браузеру масштабировать SVG, чтобы он соответствовал родительскому контейнеру. К сожалению, для этого масштабирования для работы браузер должен знать, каковы размеры содержимого SVG. Это и есть атрибут viewBox.

Illustrator добавляет атрибут viewBox, Inkscape не делает.

Чтобы увидеть, что я имею в виду, добавьте следующее в тэг <svg> после удаления ширины и высоты:

viewBox="0 0 319 177"

Вы должны обнаружить, что ваше изображение больше не обрезается и будет изменяться при изменении размера страницы.

Ответ 2

Inkscape теперь предоставляет возможность включить viewbox, если вы сохраните файл как "оптимизированный svg". Очень удобно!

Ответ 3

  • Вы сделали что-то неправильно, если вы "конвертируете" растр в векторную графику. Не используя Inkscape, я не могу сказать, но, по крайней мере, согласно Wikipedia, он не способен выполнять преобразования.

  • Вы ничего не конвертировали, ваше изображение находится в формате графического обмена!

Чтобы увидеть, как выглядит "настоящий" SVG файл, откройте пример со страницы wiki.