00 - Введение

Масштабируемая векторная графика (SVG) – язык для описания двумерной графики в формате XML. Эта графика может состоять из путей, изображений и/или текста, который способен масштабироваться и изменять размеры без потери качества изображения.

Под встроенным SVG понимают код, написанный прямо внутри HTML, чтобы сгенерировать в браузере эту графику, о которой эта книга.

У такого использования SVG есть много преимуществ, включая доступ ко всем отдельным частям графики для интерактивности, генерации текста с возможностью поиска, доступ к DOM для прямого редактирования, и улучшение доступности для пользователя.

Начав с базовой структуры и простых фигур, мы перейдем к описанию системы SVG-координат или «холста», рисованию заливки и/или обводки фигур, трансформациям, а так же использованию и обработке графического текста. Ну и завершим, коснувшись более продвинутых функций, таких как градиенты и паттерны.

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

От мелких подробностей обводки до введения в ручное создание паттернов, это руководство задумано как некий "универсальный справочник" по написанию SVG.

Прежде чем начать

Хотя это «Карманное руководство» предназначено для тех, кто уже немного разбирается в HTML и CSS, есть несколько дополнительных вещей, о которых полезно знать, прежде чем браться за код SVG в вашем любимом браузере. В их числе: какая информация в SVG-фрагменте нужна для правильного отображения, как сделать вашу графику максимально доступной, и знание, как и когда пользоваться векторными графическими редакторами.

Использование SVG

Есть несколько способов включить SVG в ваши проекты: как встроенный, как <img>, фоновое изображение, <object>, или в виде Data URI. Мы же с вами будем использовать именно встроенный SVG, который предполагает написание SVG-кода внутри тела правильно структурированного HTML-документа.

Несмотря на то, что в этой книге мы будет использовать встроенный SVG, бывают случаи, когда другие методы могут быть наиболее подходящими. Например, если вам не нужны в возможностях редактирования самой графики или доступу к её отдельным частям, то использование её в виде <img> может лучше подойти для вашего проекта.

Программы для векторной графики

Векторные графические редакторы могут быть оправданным выбором, когда нужно создавать более сложную графику, которую нерационально писать вручную. Такие программы, как Adobe Illustrator, Inkscape, Sketch, iDraw или WebCode могут оказаться полезными инструментами, которые стоит добавить в вашу SVG-копилку.

Преимуществом этих инструментов является то, что вы можете экспортировать их SVG-код и встроить его прямо в ваш HTML. Мы коснёмся этого немного позже.

Встроенный SVG в вебе

Для краткости на всём протяжении этой книги SVG DOCTYPE, номер версии xmlns, и xml:space был исключён из всех примеров кода.

Эти атрибуты определяют используемую версию SVG и пространство имён документа. Главное, что здесь надо запомнить — вам, как правило, не придется указывать эти атрибуты, чтобы ваша графика успешно отобразилась в браузере.

Давайте теперь взглянем на эти атрибуты в примере SVG-кода, сгенерированном в Иллюстраторе, чтобы гарантировать, что для вас это не будет неожиданностью, когда вы начнёте работать с SVG.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"></svg>

В большинстве случаев в DOCTYPE и этих атрибутах внутри элемента <svg> нет необходимости и от них можно избавиться, существенно «почистив» ваш код.

Доступность SVG для пользователей

Использование средств доступности SVG — отличная привычка, которую стоит выработать, но опять же, для краткости, описания и заголовки не будут включены в код на всём протяжении книги.

Как только вы станете более опытными в написании SVG, включение этих элементов сделают вашу графику более доступной для пользователей. Например, содержимое внутри элемента <desc> позволит вам обеспечить подробное описание графики для пользователей скринридеров.

С точки зрения доступности текст в SVG также обеспечивает огромное преимущество перед традиционными растровыми изображениями, поскольку SVG-текст может быть обнаружен и прочтен, и легко меняет размер, подстраиваясь под определённые настройки чтения.

Общие замечания

Еще пара общих замечаний, прежде чем перейти к главному: шрифты, используемые в примерах во всей книге, доступны на Google Fonts. Это будет видно по значениям font-family, но соответствующий код для link или @import, получаемый с Google Font, здесь не приводится, и вам придется вставить его в документ самостоятельно.

В примерах книги используются исключительно пиксели и проценты в качестве единиц измерения. SVG поддерживает следующие единицы длины:: em, ex, px, pt, pc, cm, mm, in, и проценты.

SVG-код из этой книги можно добавить в любой текстовый редактор, а затем просмотреть в любом браузере с поддержкой встроенного SVG. Хотя в целом браузерная поддержка SVG очень хороша, для более продвинутых функций, например, градиентов, между браузерами могут возникнуть разночтения. Can I Use – прекрасное место для проверки поддержки таких особенностей, но в конечном счёте ничто не сравнится с тем, чему вы научитесь методом проб и ошибок.

Помимо сказанного, вы также можете скопировать код из примеров, вставить его в окошко "HTML" на CodePen и мгновенно увидеть вашу графику на экране. Мне не хватает лестных слов для этого инструмента, так как по сути именно он в первую очередь заставил меня полюбить SVG. Это мой любимый способ учиться: играя, экспериментируя, иногда даже совершая досадные ошибки.

Наконец, в некоторых примерах отдельные части кода графики будут закомментированы, для уменьшения размера самого блока кода, когда эта конкретная часть не будет относиться к обсуждаемой теме.

<svg>
    <!--<путь d=<этот путь закомментирован> />-->
</svg>

Публикуется под лицензией Attribution-NonCommercial-ShareAlike 4.0