Пользователь
0,0
рейтинг
2 ноября 2012 в 03:20

Дизайн → Знакомство с SVG-графикой tutorial

Этот пост — первый из серии статей о SVG (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.



Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года, а с 16 августа 2011 включена в рекомендации W3C. SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ.

Демонстрация всех примеров / Скачать исходники / Официальная документация

Преимущества SVG


  • Масштабирование: в отличие от растровой графики, SVG не теряет в качестве при масштабировании, поэтому ее удобно использовать для разработки под retina.
  • Уменьшение HTTP-запросов: при использовании SVG сокращается количество обращений к серверу, соответственно увеличивается скорость загрузки сайта.
  • Стайлинг и скриптинг: при помощи CSS можно менять параметры графики на сайте, например фон, прозрачность или границы.
  • Анимация и редактирование: при помощи javascript можно анимировать SVG, а также редактировать в текстовом или графическом редакторе (InkScape или Adobe Illustrator).
  • Малый размер: объекты SVG весят намного меньше растровых изображений.


Основные SVG-фигуры


Согласно официальной спецификации можно рисовать простые объекты с помощью SVG: прямоугольник, окружность, линию, эллипс, ломаную линию или многоугольник при помощи тега svg.

Простая линия с помощью тега line с всего двумя параметрами — точками начала (x1 и x2) и конца (y1 и y2):

<svg>  
<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>  
</svg>  


Также можно добавить атрибуты или стили stroke and stroke-width, чтобы задать цвет и ширину:

style="stroke-width:1; stroke:rgb(0,0,0);" 




Демо

Ломаная линия


Синтаксис аналогичен предыдущему, используется тег polyline, атрибут points задает точки:

<svg>
<polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>




Демо

Прямоугольник


Вызывается тегом rect, можно добавить некоторые атрибуты:

<svg>
<rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>




Демо

Окружность


Вызывается тегом circle, в примере с помощью атрибута r задаем радиус, cx и cy задают координаты центра:

<svg>
<circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>




Демо

Эллипс


Вызывается тегом ellipse, работает аналогично circle, но можно задать два радиуса — rx и ry:

<svg>
<ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>




Демо

Многоугольник


Вызывается тегом polygon, многоугольник может иметь разное количество сторон:

<svg>
<polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>




Демо

Использование редакторов


Как видно из примеров, рисование базовых SVG-фигур — это очень просто, но объекты могут быть намного сложнее. Для таких нужно использовать редакторы векторной графики, например Adobe Illustrator или Inkscape, где можно сохранять файлы в SVG-формате, а потом редактировать в текстовом редакторе. Вставлять на страницу SVG можно с помощью embed, iframe и object:

<object data="images/ipod.svg" type="image/svg+xml"></object> 


Пример — изображение айпода с сайта OpenClipArt.org:



Поддержка браузерами


SVG поддерживается почти всеми современными браузерами за исключением Internet Explorer 8 и ниже. Но и это может быть исправлено использованием javascript-библиотеки Raphael.js. Конвертировать  SVG-файл в формат этой библиотеки можно на сайте ReadySetRaphael.com.



Для начала необходимо подключить библиотеку Raphael.js на нужную страницу, затем загрузить SVG-файл, скопировать и вставить сгенерированный код в function:

window.onload=function() { 
	//сюда вставить код Raphael
}


На странице вставить div с атрибутом rsr:

<div id="rsr"></div>


Демо

Заключение


Вот и все основы SVG, в следующих статьях будут разобраны более сложные примеры использования векторной графики.

Немного полезного чтива:
@grokru
карма
406,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (97)

  • +5
    SVG ещё можно анимировать при помощи SMIL
    • +1
      SVG ещё можно анимировать нативно.

      * сорри, вспомнил что тег animate и есть SMIL))).
  • –6
    Ещё бы неплохо написать хотя бы пару слов про поддержку браузерами
    caniuse.com/#search=svg
    • 0
      Это написано в предпоследнем разделе.
    • 0
      Ага, под Андроид 2.1…
  • 0
    Не “Raphael”, а “Raphaël”.
    А вот это нее понял: “затем загрузить SVG-файл, скопировать и вставить сгенерированный код в function” — какой код? Код SVG-файла? Код Raphaёl.js?
    • +1
      Случаем не подскажите, как Raphaël произносится? Как Рафаёл? Рафаэль?
      • 0
        Не могу сказать точно, но подозреваю, что англоязычная “e” с умляутом звучит схоже с норвежской “ö”, которая читается как нечто среднее между русскими “о” и “ё”.
        Короче, [рафай'ол'].
        • +2
          В английском нет ë.

          А, например, во французском — есть: там ë читается как обычная e, независимо от предшествующей буквы. То есть, например, в словах Noël, Moët произношение сочетания oë можно приблизительно передать русскими буквами оэ. Возьмите для сравнения словосочетание chef d'oeuvre — вторая его часть произносится (приблизительно) как дёвр.

          С Рафаэлем — та же фигня. Без точек был бы Рафэль. Во французской википедии есть даже статья об этом имени, там оно пишется аналогично:
          Raphaël est un prénom masculin.
        • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          В английском и французском букв с двумя точками, строго говоря, нет. Но иногда две точки над второй гласной применяются. Они служат, чтобы «разбить» диграф и заставить каждую букву читаться по своим собственным правилам.

          Предположим, по правилам буква «o» читается как звук «о», буква «e» читается как звук «э», а сочетание «oe» читается как русская «ё». Тогда «oë» будет предписывать чтение не как «ё», а по отдельности: «оэ». Что и продемонстрировал коллега shoorick в примерах про Noël и Moët.
        • 0
          Боже, зачем Вы изощряетесь, когда на сайте продукта во втором же абзаце указано произношение: ['ræfeɪəl]? По правилам англо-русской практической транскрипции по-русски это пишется так: «Рэ́фейэл».
          • 0
            Действительно, всё так. Простите, был невнимателен.
      • +5
        Сам Барановский произносит как «Рафаэль».
        • +2
          Raphaël назван в честь известного художника ренесанса и произносится Рафаэль. Диарезиз в название добавлен для англоязычных читателей, чтобы они не читали “ae” как один звук.

          Вообще не стоит заморачиваться, как произносит большинство, так и правильно. Мало кто поймёт у нас что «найки» и «эдоби» это на самом деле Nike и Adobe. ;)
      • +1
        • 0
          Мнемонически, для запоминания: «RA(dmin) Fail» ;-)
          • 0
            Здесь все-таки feɪəl, а не feɪl, так что плохая мнемоника.
  • +2
    А как в SVG нарисовать кривую Безье?
    • +2
      При помощи тега path. Надеюсь, что автор расскажет об этом в следующих сериях.
  • 0
    Хороший формат. До появления Рафаэль нужно было использовать адобовский плагин, который позволял работать чуть ли на в 5-м IE…
  • +6
    Вы пробовали делать сложные анимации с использованием svg?
    Даже несложная svg анимация, ощутимо грузит firefox. Причем как CSS Transition/Animate, так и с помощью SMIL или javascript.
    Глюки при работе с сложными svg в opera. Проблема рендеринга. Встречается при определенных обстоятельствах, но подпортит нервы неплохо.
    Проблемы с фильтрами. Плохо работает гауссово размытие в chromium ниже 20-ой версии. В firefox неплохо, за исключением ужасной прожорливости и опять же отсутствие поддержки некоторых параметров в фильтрах.

    Это все с анимациями связанными с svg.

    Со SMIL все не так радужно (не везде работают правильно правила связанные с begin="(#).end + (n) s").

    Причем вопросы с chromium и opera легко решаемы(за исключениями), а вот проблемы с firefox — это ужасная беда. Причем в багтрекере Фокса часто ссылаются на svg team, типа они виноваты.

    Сам по себе SVG отличный формат. И для работы с простыми композициями пойдет. Но для создания и работы со сложной композицией, с анимациями, текущие реализации SVG — проблемны(причем особенно в Firefox).
    • 0
      Да все в порядке с анимацией в SVG. Вот не очень простая анимация на Halloween нигде вроде особенно не тормозит.
      • 0
        Только что проверил.

        Разница работы:
        Chromium. Полет нормальный.
        Firefox:
        1)В конце домик не загорается.
        2)Не хило грузит, даже после проигрывания анимации.
        3)Анимация не имеет много мелких и сложных элементов.
        4)Нет сложных трансформаций, в том числе групп.

        Оперу еще не смотрел.

        Всё проверено сейчас на Ubuntu и Vista.

        Да кстати, в анимации нигде нет фильтров
        • 0
          Ок, на этот раз вы победили.
          Но я еще сделаю сложную анимацию с трансформациями и множеством элементов.
          Про фильтры обещать не буду, т.к. они даже в графических редакторах оказываются тяжелой операцией.
          • 0
            Тем не менее, фильтры на шейдерах могут реактивно работать!
      • 0
        Это как раз простая, нет трансформаций и масштабирования объектов!
        • 0
          т.е. animateTransform это не анимация транформаций?
          • 0
            Ну попробуйте что нибудь сложнее двигания пикселей и альфа канала. Блин с этой задачей вполне должен первый пенёк справляться. Ну с учетом разрешения ладно уж второй.
      • 0
        ФФ 16.0, вин хп: лагает ощутимо.
        • 0
          У меня на Win7 на FullHD с аппаратным ускорением быстрее чем в Опере и Хроме, в которых около 15–20 фпс. Без него примерно так же.
  • +1
    Кстати, про скриптинг SVG с помощью js я уже писал статейку. За год ещё не должна была устареть :-)
    • 0
      А как она мне помогла в своё время ;)
  • 0
    Мне вот очень понравилась фишка прямого включения SVG-кода в HTML-страницу, внутри элемента SVG. Примерно так:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/html">
    <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
    <body>
    Над картинкой<br>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="560px" height="540px">
        <g transform="scale(0.5)">
        <svg x="574" y="526" fill="red" stroke="black" stroke-width="1" stroke-linejoin="round">
        <a xlink:href="somewhere-else">
        <path d="M 15,45 l 0,52 a 228,228 0 0,0 114,-55 l -37,-40 a 176,176 0 0,1 -77,43 z"></path>
        </a>
        <path d="M 15,120 l 0,116 a 360,360 0 0,0 211,-96 l -78,-79 a 251,251 0 0,1 -133,59 z"></path>
        <path d="M 78,269 l 53,218 a 629,629 0 0,0 109,-36 l -7,-13 a 611,611 0 0,0 154,-103 l -145,-146 a 408,408 0 0,1 -164,80 z"></path>
        <path d="M 319,242 l 41,43 l 25,-26 l -39,-39 z"></path>
        </svg>
    </svg><br>
    Под картинкой
    </body></html>
    
    

    И после этого хоть что с элементами делай — они включены в DOM tree, можно их дёргать jQuery и тому подобное. И гиперссылки можно навешивать на элементы.
    • 0
      А какие браузеры поддерживают такое включение?
    • +4
      А мне очень нравится фишка включения HTML в SVG, получается примерно
      так
    • 0
      Действительно, очень удобно.
      И с javascript работать просто, и стили для svg-элементов можно в основной css-файл помещать.
      Пример — мой редактор html-карт habrahabr.ru/post/152731/
  • +2
    Если уж взялись разъяснять основы, то ссылка на спецификацию была бы не лишней.

    Вставлять на страницу SVG можно с помощью embed, iframe и object


    Не только; ещё через собственно svg (инлайново), img, background-image, favicon и font-face.

    SVG поддерживается почти всеми современными браузерами за исключением Internet Explorer 8 и ниже.


    Internet Explorer 8 и ниже вполне себе поддерживают SVG через сторонние плагины, например эдоубиевский.
    • 0
      Через плагин, которого ни у кого нет, а также разработка и поддержка которого давно прекращена.
      • 0
        Во-первых, эдоубиевский плагин — не единственный, хотя не знаю, какова судьба остальных. Во-вторых, зачем ему разработка и поддержка, если он нужен только для старых IE? В-третьих, тот, кто до сих пор имеет старый IE, весьма вероятно имеет и плагины, которые там требовались. В-четвёртых, если вдруг не имеет, можно выдать предложение поставить, о чём я писал два года назад, но по нынешним временам, вероятно, лучше предложить обновить браузер.
        • 0
          Предложение поставить не выдаст, на запрос возвращается ошибка. А вот сам запрос заметно тормозит загрузку. Кстати, это справедливо только для <object>, который сам по себе далеко не всегда подходит.

          Такие плагинов практически ни у кого нет, если есть другие сведение, будьте добры, приложите статистику. У большинства стоит только флеш, на втором месте Adobe Reader, и на это, пожалуй, список заканчивается, кроме, быть может, всякой адвари вроде навязываемых тулбаров.
  • 0
    Хочу поговорить про векторную графику в интернете.

    Apple перевела все свои устройства на дисплеи высокого разрешения. Есть разные мнения на тему «зачем оно мне надо», но суть не в этом. Что бы мы об этом ни думали, через пару лет все производители сделают то же самое, поскольку технология существует и маркетологи не упустят шанс навариться на ней.

    Множество крупных сайтов уже сейчас в какой-то мере поддерживают экраны с высокой плотностью точек, но они делают это довольно тупо: для каждого элемента с изображением готовят два файла — обычного разрешения и удвоенного (иногда достаточно кратности 1.5). Сейчас не учитывается один важный момент: при высокой плотности точек можно интерполировать все подряд и это будет выглядеть хорошо. То есть, вам не нужно делать картинки 100%, можно выбрать любой удобный размер, который всех устроит. А пользователь будет активнее пользоваться масштабированием в браузере. Причем, масштабирование будет плавным (как в Safari), а не ступеньками (как в Chrome). Не будет такого, что сайт сверстан под 1024 или какое-то другое разрешение.

    И для обеспечения работы таких сайтов очень пригодится векторная графика. Конечно, основная масса контента останется растровой, но в оформлении и в инфографике удобно будет использовать вектор.
    • 0
      Всё бы хорошо, но старые браузеры не поддерживают SVG. Всё равно нужно два файла: старый добрый PNG и SVG.
      • 0
        Старые браузеры и с PNG имеют некоторые проблемы. Тогда уж GIF.
        • 0
          Этим проблемам gif не поможет.
          • 0
            Я имел в виду прозрачность фона png в IE6.
            • 0
              Прекрасно себе прозрачен в 8-битном png не хуже чем в gif.
              • 0
                …в альфа-канале, разумеется.
                • 0
                  У гифа его нет, как я сказал, он ничем не поможет.
      • 0
        Старые браузеры бывают только у Microsoft, это раз.
        Через два-три года не будет даже IE8, это два. IE9 уже обогнал IE8 в рунете.
        • 0
          Firefox 3.6, Android 2 у Майкрософт?
          • 0
            А что Firefox 3.6? Мы под него разработку ведём, и используем при этом SVG.
            • 0
              Не поддерживает SVG в img и фоне, не говоря уж о прямо в HTML. Только object, только хардкор.
              • +1
                Неправда: в img и фоне не поддерживает, а инлайново — вполне себе, только XHTML, разумеется, должен быть.
                • +1
                  Вы где-нибудь видели на живом реальный XHTML? Который падает от любого не экранированного амперсанда.
                  • 0
                    Не только видел, мы только его и пишем уже лет пять. Амперсанды экранируем, да, не вижу проблемы.
                    • +1
                      Это, наверное, «неживой»...;-) В смысле, генерированный…
                      • 0
                        Так он и должен быть весь генерированный, какой же ещё?
                        • 0
                          Можно и руками писать. Как, в прочем, и postscript… Хардкор такой хардкор…
  • 0
    Для меня как для инженера минусом является то что нет возможности сохранить в какой нибудь чертежный формат. Пусть хотябы в открытый DXF. Это уже открыло бы большие перспективы для разработчиков. И тогда наконец для нас, инженеров, появились бы адекватные сервисы контроля версий, подобные GIT, SVN и т.д. для программистов.
    Хотя… может быть есть такая надстройка? Никому не попадалась?
    • 0
      Зачем? Ведь существует некий Adobe SVG.
      Т.е. в принципе как-то извратиться и хранить версии можно. Однако подозреваю в сравнении разных ревизий в текстовом виде будет мало смысла…
    • 0
      Открыл сейчас Inkscape. Увидел в нем как вариант сохранения .«Desktop Cutting Plotter (AutoCAD DXF R14) (*.dxf)'.
      • 0
        Хм, инженер чертящий в инкскейпе это нонсенс… Тут даже без смайла. Но в общем хорошо, да.
      • +1
        Вещь интересная, но не совсем то что нужно. Спасибо. Только это больше для художников, дизайнеров, а не для инженеров.
    • 0
      Поищите в Гугле по запросу «dwf compare». Думаю то что вам надо, правда не SVG. Сравнение чертежей в DWF формате.
  • 0
    А вот еще хороший пример.

    Я вот до сих пор не могу понять, можно ли в SVG вывести отформатированный текст? Т.е. задаются граница текста (например прямоугольник) и опции: выравнивание по вертикали и горизонтали.
    • 0
      Можно. Можно даже по кривой отображать текст.
      Примеры не буду писать, наглядно можно увидеть это в InkScape.
      • 0
        По кривой как раз сейчас не интересует. Интересует именно форматированный вывод. Если можно, поделитесь, пожалуйста, примером.
        • 0
          По спецификации W3C
          Но это SVG версии 1.2 который конечно же полностью не поддерживается браузерами.

          Поэтому пока только размещение текста по кривой(которая может быть прямой, внутри прямоугольника), с изменением параметра у тега textPath startOffset="(значение)"

          Так что в SVG можно, но браузер это проигнорирует.
        • +1
          Все предельно просто:
          <foreignObject>
            <div xmlns="http://www.w3.org/1999/xhtml">
              <p>My <strong>text</strong></p>
            </div>
          </foreignObject>
          
          • 0
            Боюсь там не все красиво как кажется
            баги webkit
            • 0
              Ну, форматированный текст ведь можно вывести?
              А баги есть в любом сложном продукте.
  • 0
    Малый размер: объекты SVG весят намного меньше растровых изображений.

    неправда ваша. бывает и наоборот. особенно на 24" можно запросто достичь :)
    • +2
      поясните, пожалуйста, как размер экрана влияет на объём svg-кода?
      • +2
        Ну если внутрь SVG присобачивать растр, как этим грешит Corel, то конечно объем раздуется =)
        • –3
          Рассмотрим 1920х1080 например. Растр такого разрешения займет 49766400 самых глубоких бит. Однако сохраненный в PNG файл окажется всего-лишь 165Кб. SVG такого размера представить, да и сгенерить (исключительно вектор, заметьте), совсем не сложно. Инфа 100%. Существует правда SVGZ, однако не принципиально.
          Что касаемо диагонали отображающего устройства, то не станем же мы пихать в 4" андроида какого-нибудь то же самое, что хорошо разместится на 24". да?
          • +1
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full"><path d="M 78,269 l 53,218 a 629,629 0 0,0 109,-36 l -7,-13 a 611,611 0 0,0 154,-103 l -145,-146 a 408,408 0 0,1 -164,80 z" fill="red" stroke="black" stroke-width="1" stroke-linejoin="round"></path></svg>
            


            Этот SVG займёт ровно 307 байт как для андроида с экраном 4", так и для устройства с экраном 24".

            Ещё раз, поясните мне, как вообще тут что-то может зависеть от размера экрана?
            • –2
              Вы правы, никак не зависит. Это вопрос религии. Лично я спорил с высказыванием ТС, но привел, похоже, слишком личный опыт. Он не интерполируется на весь окружающий мир, извините. У меня в проекте именно так.
          • +1
            Если есть огромное количество объектов в SVG, то спору нет — он может оказаться в разы больше.
            PNG как таковой сжатый формат(который сжимается по определенным алгоритмам), поэтому все таки нормально сравнивать именно с SVGZ.

            PNG тоже не любое изображение может оптимально сжать. Особенно когда значение RGBA практически каждого пикселя уникально.

            Но тут для проекта надо подбирать, где SVG, где PNG, где JPEG, а где и старый GIF подойдет.

            А вот насчет разрешения… Вон тут недавно был топик про retina, Торвальдса и пр.. Так что черт знает, что там с разрешениями сейчас. Слишком большой разброс поддерживаемых разрешений теперь.
  • 0
    Возможно кому-то окажется полезным — библиотека Ample SDK [в числе прочего] рисует SVG как он есть, без промежуточных форматов, а также предоставляет DOM, SMIL и т.д. в IE9.0- пример
  • 0
    Очень понравилась статья, все по делу
  • –1
    Каким образом Raphael.js осуществляет поддержку IE?
  • +1
    Статью пока не прочитал.

    Осуществил год назад часов за 8-12 на этой хрени свою мечту — измерение пути по скриншоту карты. На Оперу под Андроид 2.1 перенеслось криво (вообще и на виндах работает по-разному в FF и хроме). Когда поменял планшет на таковой с ёмкостным экраном, вообще понял в какую лужу сел — в моём поделии почти всё было завязано на дабл-клик, на резистивном было хоть как-то реально со стилусом…

    В общем, технология гиморная, но перспективная.
  • 0
    Хренасе «перспективная»!1 Вот если б я 2(!) года назад не настоял на выборе svg, то сейчас имел бы гемор полной попой )

    Sorry, это ответ на предыдущий пост Flammar
    • 0
      Кому хренасе, а некоторые на трёх браузерах проверяли код, который в экран не влазит и размеры меняет — как он на скроллинг реагирует. Не, согласен, что претензия на GIU на чистом SVG — это несколько изврат. Но всё же.

      Да, а ещё я на нём объект XMLHTTPRequest обнаружил…
    • 0
      Так что, раз на разных браузерах по-разному, пока только «перспективная»…
  • –2
    недавно только писали про «оранжевый цвет» habrahabr.ru/post/156451/ и тут бабах! такое лого… или такой?
  • –5
    window.onload=function() {
    //сюда вставить код Raphael
    }

    Боже, мои глаза.
  • 0
    Ещё стоит добавить, что polygon от polyline отличается тем, что polygon автоматически закрывает фигуру, а polyline — нет.

    Кстати библиотека Fabric.js умеет интерпретировать SVG и переносить на canvas.

    Да, и ещё на интуите ( intuit.ru ) есть тоже про SVG, причём очень много.
  • 0
    Не понял кстати, зачем разделять синтаксис line и polyline — по сути ведь это одно и то же.

    И еще непонятно, почему у прямоугольника правый и нижний бока жирные.

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