Формат SVG: как внедрить графические файлы на свой сайт

В 1998 году Консорциум Всемирной паутины (W3C) предложил двух потенциальных кандидатов на новый стандартный язык разметки для создания двумерной векторной графики на основе XML. Компании Microsoft и Macromedia (сегодня известная как Adobe Systems) включили в гонку язык векторной разметки (VML), а IBM и Adobe среди прочих предложили язык разметки точной графики (PGML). В конце концов, W3C решил принять в качестве стандарта ни один из этих двух языков, а вместо этого объединить их. 4 сентября 2001 года результат был опубликован в рекомендации под названием Scalable Vector Graphics (SVG) 1.0 Specification. Однако такой подход не позволил W3C удовлетворить все заинтересованные стороны, поэтому Microsoft долгое время продолжала полагаться на свой собственный язык — VML — в своих приложениях (таких как Internet Explorer, версии с 1 по 9). Это, однако, не помешало недавно появившемуся формату SVG стать очень успешным.

Когда в 2001 году W3C scalable vector graphics стал рекомендуемой спецификацией для двухмерной векторной графики, язык XML считался оптимальным решением для представления такой графики, как в статичной, так и в анимированной форме. Но в то время браузеры еще не были разработаны до уровня, подходящего для нового формата SVG; в случае с Internet Explorer для чтения и отображения графики XML долгое время требовались внешние плагины, такие как Adobe SVG Viewer и Batik SVG Toolkit от Apache. Кроме того, перед веб-мастерами стояла задача обеспечить резервное решение для графики PNG.

С тех пор как веб-браузеры адаптировались к HTML5, необходимость в подобных трудоемких мерах отпала; парсер HTML5 позволяет интегрировать элементы SVG непосредственно в HTML-код без указания пространства имен XML, которое информирует браузер о контексте внедренных элементов. Это устраняет необходимость в специальном парсере и плагинах.

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

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

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

• Открытый исходный код: W3C создал SVG как свободный стандарт, что означает, что вы можете использовать язык наград без ограничений, на различных платформах и в сочетании с другими языками XML.

• Разнообразие вариантов анимации: Элементы SVG также можно анимировать различными способами. Для этого можно использовать язык W3C SMIL (синхронизированный язык интеграции мультимедиа), но сейчас разработка этого языка приостановлена. На самом деле, Internet Explorer и Edge никогда не поддерживали SMIL, и, возможно, он не будет реализован в будущих версиях Chrome. Чаще всего для анимации используется JavaScript, если вы хотите, чтобы элементы SVG реагировали на такие события, как, например, щелчки или движения мыши. Третьим (более ограниченным) вариантом является использование свойств CSS «анимация» и «путь движения», хотя они также не полностью поддерживаются веб-браузерами.

• Файлы SVG можно форматировать с помощью CSS: графикой в формате SVG можно манипулировать с помощью языка таблиц стилей CSS. Это позволяет отображать все атрибуты представления (т.е. цвета, фильтры, шрифт, размер шрифта) в отдельном файле CSS или прямо в SVG, чтобы изменить внешний вид графики.

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

• Безбарьерность: SVG-графика основана на тексте и поэтому машиночитаема программами чтения с экрана и всеми устройствами, способными понимать и воспроизводить исходный код.

• Видимость в исходном тексте: если SVG-графика находится в HTML-документе, вы можете легко настроить ее в программном редакторе и изменить такие параметры, как цвет или размер шрифта, без каких-либо обходных путей.

Вышеперечисленные преимущества делают встраивание формата SVG незаменимым для веб-мастеров. Многочисленные сложности, связанные с различными настройками браузеров, теперь остались в прошлом. Графический формат предлагает преимущества в удобстве использования, SEO, доступности и т.д. Но не слишком ли это хорошо, чтобы быть правдой? Формат SVG действительно имеет свою долю проблем.                                                                                                                                                                  

Одним из важнейших недостатков, связанных с векторной графикой, является ограниченный спектр программ. Хотя вы можете выбрать один из обычных инструментов для обработки изображений, для создания, сохранения и преобразования SVG-файлов вам потребуются специальные инструменты, такие как Adobe Illustrator или Inkscape. Следовательно, освоение графики SVG может оказаться сложным и длительным. Кроме того, этот графический язык подвергается критике по следующим причинам:

• Высокая требовательность к ресурсам клиента: HTML5 устранил проблему необходимости загрузки плагинов, но перенес процесс рендеринга на уровень браузера. Отсутствие нагрузки на сервер и малые размеры файлов могут привести к сокращению времени загрузки, но это предполагаемое преимущество также сопровождается проблемами. Если компьютер пользователя не обладает необходимой вычислительной мощностью, сложная векторная графика в формате SVG может привести к задержке отображения страницы. Вы можете решить эту проблему, удалив ненужные элементы для оптимизации кода SVG.

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

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

Содержимое SVG размечено в XML, что означает, что оно имеет те же структурные и синтаксические характеристики, что и любой другой XML-документ; по сути, код является иерархическим, содержащим элементы и атрибуты. Элемент идентифицируется парой тегов, которые всегда начинаются с (<tag name>) и заканчиваются (</ tag name>). Атрибуты содержат дополнительную информацию об элементах и доступны как пары ключевых слов в начальном или пустом теге элемента (<tag name attribute name=’attribute value’>). Также можно вставлять инструкции и комментарии. Каждый XML-документ SVG должен содержать ровно один элемент на верхнем уровне (<svg>), ниже которого может быть вложено любое количество дополнительных элементов. Определение типа документа и декларация XML могут также использоваться для определения типа, версии и кодировки символов базового документа, среди прочего.

Больше нет необходимости загружать дополнительные плагины, чтобы встроить в веб-проект графику в формате SVG. Вместо этого вы можете просто интегрировать векторную графику непосредственно в HTML-документ, где у вас есть несколько вариантов:

Элемент HTML, img, является абсолютным стандартом для встраивания графических файлов в веб-сайт. Как самостоятельный элемент, он не имеет содержимого элемента и конечного тега. Кроме того, в HTML нет необходимости в закрывающем слэше (/). Этот способ встраивания обеспечивает наиболее распространенную форму синтаксиса, поэтому WordPress автоматически применяет его к графике SVG. Если тег img размечен с помощью CSS для создания отзывчивого дизайна, векторная графика автоматически адаптируется к различным размерам дисплея без дополнительных настроек. Однако этот метод реализации не позволяет связать SVG-графику с URL-адресом или приложением JavaScript. Поэтому строка кода для встраивания SVG с помощью тега image выглядит примерно так:

С помощью тега object можно встраивать содержимое в веб-проект. Этот тег позволяет пользователям интегрировать широкий спектр элементов, включая Java-апплеты, Flash-ролики, диаграммы Excel, а также графику в формате SVG. В отличие от элемента изображения, этот метод позволяет интегрировать запасное решение. Это может быть текст или пиксельная графика, которая отображается посетителю вашего сайта, если браузеру не удается загрузить SVG-файл. Вы также можете связать формы в исходном коде графического файла и создать анимацию с помощью JavaScript. Однако объектный метод редко поддерживается наиболее распространенными системами управления контентом, что иногда делает его несколько громоздким в использовании. Код для интеграции SVG с тегом object с графикой fallback выглядит следующим образом:

Встроенные фреймы, более известные как iFrames, используются со времен HTML4 и теперь поддерживаются всеми браузерами. Веб-мастера используют эти элементы в основном для вставки внешнего контента с других сайтов, например, YouTube или Google Maps. Однако с помощью элемента iframe можно также отображать на сайте файлы в формате SVG. Как и объектные элементы, iFrame позволяют связать векторную графику с JavaScript и URL-адресами, а также определить альтернативное изображение или текст, если SVG-графика не загружается. Они также применимы во всех доменах. Даже когда наиболее распространенные системы управления контентом поддерживают эту технологию, пользователь сталкивается с длительным процессом, когда дело доходит до создания отзывчивого инлайн-фрейма. В следующем примере показана общая структура SVG iFrame, который отображает альтернативную PNG-графику, если возникает проблема совместимости:

Можно встроить SVG-графику в качестве фонового изображения с помощью CSS так же, как и в случае с пиксельной графикой. При этом вы можете воспользоваться преимуществами масштабируемости формата SVG без потерь; фон SVG автоматически подстраивается под область просмотра (т.е. доступную область дисплея используемого устройства) без снижения качества. Если вы хотите использовать векторную графику в качестве фонового изображения, просто создайте соответствующий контейнер div, как показано выше:

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

В следующем отрывке мы приводим пример небольшого SVG-варианта для встраивания флага Италии в HTML-рамку:

Который отображается в браузере следующим образом:

В течение многих лет формат SVG считался элегантной и эффективной альтернативой пиксельным графическим форматам, таким как PNG, JPEG и GIF, которые более широко использовались в веб-разработке. Несмотря на это, формат ассоциировался со значительным объемом дополнительной работы. Это было связано в первую очередь с тем, что некоторые из наиболее популярных браузеров, в частности, Internet Explorer от Microsoft, не поддерживали формат SVG. Однако сегодня в большинстве случаев SVG-файл можно интегрировать так же легко, как и любой другой файл изображения. Для многих визуальных элементов веб-проекта векторная графика является отличным выбором; помимо прочего, она может обеспечить отзывчивые и безбарьерные иконки, кнопки, логотипы и шрифты, которые можно легко адаптировать в любое время.

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