it-roy-ru.com

Как подготовить файл 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, который я удалил.

19
user3009918

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

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

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

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

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

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

viewBox="0 0 319 177"

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

17
Paul LeBeau

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

32
qed

Как вы можете прочитайте это здесь (и для завершения ответ Qed ):

  1. Выберите объект (ы) для экспорта
  2. Откройте окно свойств документа ( Ctrl+Shift+D)
  3. Выберите "Изменить размер страницы на чертеже или выделении"
  4. Файл> Сохранить как копию ...
  5. Выберите Оптимизированный SVG в качестве формата
0
Barna Tekse
  • Вы сделали что-то не так, если «конвертируете» растр в векторную графику. Не могу использовать Inkscape, я не могу сказать, но по крайней мере согласно Википедии он не способен выполнять преобразования. 

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

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

0
Okuma.Scott