Доступные SVG.

SVG представляет собой формат изображения для векторной графики. В буквальном смысле это ни что иное, как масштабируемая векторная графика. То есть это как раз то, с чем вы работаете в Adobe Illustrator. Использовать SVG при web-разработке довольно легко, но есть особенности, которые стоит рассмотреть.

Для чего используют SVG

• Маленький размер файла, который хорошо сжимается
• Масштабирование до любого размера без потери качества
• Отлично смотрится на дисплеях retina
• Полный контроль дизайна при интерактивности и в фильтрах

Нарисуем что-нибудь для предстоящей работы в Adobe Illustrator. Возьмём птичку Kiwi:

​

Обратите внимание, что холст обрезается ровно по краю картинки. Холст в SVG абсолютно идентично строится, как PNG или JPG. Вы можете сохранить файл непосредственно из Adobe Illustrator как SVG файл.

​

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

​

​

Оба способа могут оказаться полезными.

Используем SVG в виде тега img

В Illustrator наш холст получился 612px ✕ 502px.

Насколько большим изображение будет на страницу решать вам. Вы можете изменить размер изображения путем определения свойств width и height, то есть абсолютно так же, как и с PNG или JPG. Вот пример:

Как сделать кроссбраузерный SVG

Используя SVG таким образом, нужно иметь ввиду о разной поддержки браузерами. По сути, SVG работает везде кроме IE8 и нижу, а также Android 2.3 и ниже.

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

Одним из способов, чтобы проверить поддержку SVG является Modernizr, с помощью которого меняется путь src:

if (!Modernizr.svg) { $(".logo img").attr("src" , "images/logo.png");

David Bushell придумал очень легкий альтернативный способ, но он содержит javascript в разметке:

< img src = "image.svg" onerror = "this.onerror=null; this.src="image.png"" >

Стилевое оформление SVG

Видите, как SVG похож на HTML? Это потому что они оба являются данными XML. В нашем дизайне есть два элемента, которые составляют основу, это ellipse и path. Мы можем без проблем указать им классы через HTML код.

< ellipse class = "ground" > < path class = "kiwi" >

Сейчас мы можем контролировать эти элементы с помощью специального SVG CSS. Этот CSS не должен напрямую встраиваться в SVG, он может быть расположен абсолютно в любом месте. Обратите внимание, что SVG элементы имеют специальный набор стилей, которые созданы специально для работы с векторной графикой. Например, используется не обычный background-color, а fill. Хотя некоторые обычные стили также работают, например:hover.

В SVG имеются забавные фильтры. Например размытие:

< svg ... = "" > < filter id = "pictureFilter" > < feGaussianBlur stdDeviation = "5" >

Затем вы можете при необходимости применить это в css:

filter: url (#pictureFilter);

Вот, что получилось:

Поддержка “inline” SVG браузерами

Один из вариантов фолбэка для такого типа SVG:

< svg > ... < div class = "fallback" >

Затем снова используем Modernizr:

Logo-fallback { /* Make sure it"s the same size as the SVG takes up */ No-svg .logo-fallback { background-image: url (logo.png);

Использование SVG в качестве объекта object

Если использование “inline” SVG вам не по душе (помните, что у этого варианта есть недостатки, например отсутствие кеширования), вы можете связать SVG с объектом object и потом менять его с помощью css:

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

Крошечный размер файла

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

Масштабируемость

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

Взаимодействует с DOM

SVG иногда упоминается как «рисование с разметкой»: каждый элемент в SVG-изображении взаимодействует с DOM, это означает, что CSS и JavaScript могут манипулировать части SVG-документа. В отличие от растровой графики, каждая отдельная форма в SVG может иметь свой собственный идентификатор или класс.

Легко модифицировать и адаптировать

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

логотипов

• иллюстраций и чертежей

Инструменты для работы с SVG

Хотя вы можете создать документ SVG с помощью любого текстового редактора, программы для векторной иллюстрации, например Adobe Illustrator или Inkscape, как правило, является лучшим выбором (хотя следует отметить, что другие приложения, включая 3D-программы, такие как Blender и серверные приложения, могут экспортировать SVG).

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

Интеграция SVG

Существует три основных способа, которыми SVG можно использовать непосредственно на веб-странице:

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


Подобно растровым изображениям, файл SVG можно ссылаться на тег или через CSS в качестве фонового изображения. Это часто лучший способ, если SVG не нуждаются в индивидуальном внимании CSS и JavaScript.


Вставляется как