Что такое svg css

Используем SVG на сайте

Оставим за скобками вопрос о целесообразности использования SVG на сайте. Каждый сам для себя должен определить полезность этой технологии. Тем более что эта тема поднималась уже неоднократно.

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

Статья рассчитана в первую очередь на тех, кто до сих пор не использует векторную графику на своих сайтах, но очень хочет быть одной ногой в будущем настоящем.
Для любопытных сразу приведу сводную таблицу:

1 Можно менять цвет, размер, выравнивание и прочее стили обычного текста
2 Стили должны быть прописаны или в самом SVG файле, или подключены внешним стилем в SVG в начале файла:

По правде говоря стили прописанные внутри SVG так же будут работать и при использовании тега IMG или background-image, но в этом нет никакого смысла.

Иконочный шрифт

Плюсы и минусы такого подхода:
+ иконка ведет себя как символ шрифта, и все параметры настраиваются так же через CSS (размер, цвет, выравнивание и прочее);
+ единственный способ работающий в IE 8 без дополнительных манипуляций;
– все элементы SVG файла объединяются в один символ, поэтому управлять им при помощи CSS или JS можно только как единым целым;
– поддерживаются только одноцветные иконки;
– при сбое загрузки шрифта у пользователя либо не отобразятся иконки совсем, либо, при совпадении кодов иконок с символами юникода, отобразятся соответстующие символы.

SVG как OBJECT

К сожалению (или к счастью) codepen и jsfiddle блокируют загрузку внешних object в целях безопасности.
Встраивание выглядит следующим образом:

Объект встраивает элмемент атрибута data наподобие iframe, добавляя внутрь себя разметку подключаемого файла, поэтому к элементам можно обращаться при помощи JS, но не совсем обычным образом:

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

Но объект можно трансформировать используя CSS например так:

Плюсы и минусы такого подхода:
+ можно использовать внешний CSS файл для управления стилями;
+ поддерживаются SVG анимации и фильтры;
+ поддерживаются интерактивные анимации;
– для IE 8 и ниже необходима замена на растровое изображение.

SVG в IMG или background-image

Оба способа встраивания чем-то похожи на встраивание при помощи тэга object, например нельзя менять пропорции изменением ширины и высоты контейнера, но имеют больше ограничений.
Подключаемые в SVG внешние стили не будут работать, обратиться к элементам через JS так же не получится. Интерактивные анимации в SVG тоже не сработают. А проблемы с IE 8 и ниже так же остаются.
Но SVG анимации будут работать, в обоих случаях.
В случае с IMG втраивание выглядит как обычная картинка:

В случае с background-image как обычный блок:

Так же при помощи background-image можно использовать спрайты, как с png изображениями, а менять размер можно при помощи background-size:

Учитывая что процент людей c экранами device-pixel-ratio которых выше 1 и их устройства не поддерживают svg стремится к нулю(если такие вообще есть), то можно использовать медиа выражения для подключения svg, только для них, а для остальных использовать png версию:

Плюсы и минусы этих подходов:
+ поддерживаются SVG анимации и фильтры;
+ в случае с background-image можно использовать SVG спрайты;
– нельзя менять свойства элементов SVG через CSS или JS;
– не поддерживаются интерактивные анимации;
– для IE 8 и ниже необходима замена на растровое изображение.

Inline SVG

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

Например имея набор иконок в SVG файле, можно использовать их повторно простой конструкцией вида:

где some_svg_element_id id элемента внутри исходного SVG файла.

К отдельно взятому элементу можно, например, применять SVG трансформации:

Но если внутри исходного SVG к элементу была применена интерактивная анимация, например по клику, как в демо выше, то при дублировании объекта анимация будет срабатывать на всех элементах одновременно.
SVG анимации и фильтры это тема для отдельной статьи, поэтому ограничусь лишь примером SVG фильтра (подробнее о SVG фильтрах), и примером SVG анимации (подробнее о SVG анимациях).
С обесепечением работоспособности для IE 8 и ниже все несколько сложнее, чем в других вариантах. Необходимо добавить дополнительную разметку:

Плюсы и минусы этого подхода:
+ никакой подгрузки внешних файлов;
+ доступны манипуляции с элементами SVG через CSS и JS;
+ поддерживаются SVG анимации и фильтры;
+ поддерживаются интерактивные анимации;
+ возможность повторного использования элементов;
– загрязняется код страницы;
– для IE 8 и ниже необходима дополнительная разметка, и замена на растровое изображение.

Источник

Cила CSS поможет тебе принять форму, SVG!

Зачем я это пишу?

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

Сразу скажу да, я использовал иконочные шрифты, вот в чем здесь проблемы:
1. Такие иконки в браузере рендерятся как шрифт и в Windows, например, часто получаются мыльные края. Есть CSS свойства, которые должны решать эту проблему, но они работают только в WebKit и только под MAC — то есть бесполезны. Дизайнер ругался.
2. Только в 23 Chrome и только под Windows такой шрифт начал исчезать, а в некоторых случаях сильно «рвать» остальную верстку сайта. Я много раз пользовался такими шрифтами, но первый раз со своими собственными иконками. И первый раз такая проблема.
3. Невозможно добавлять внутреннюю тень. В проекте это было обязательно. Дизайнер ругался.
4. Вес такого шрифта. C SVG не сравнится.
5. Все-таки SVG имеет больше возможностей по сравнению со шрифтом.

Приступим или исходные данные.

Исходные данные — чиcтый HTML документ с подключенным к нему main.css или то место, где мы будем писать стили наших иконок.
Так же добавим SVG документ в тег body. В нем, в разделе defs, мы будем декларировать формы наших иконок в виде clip-path и фильтры для них (внутренняя тень).
Как декларировать SVG лучше подсмотреть у вредного старичка, так как он самый превередливый.

Добавляем форму иконки

Как получить SVG код, я думаю, писать не нужно? Достаточно просто открыть SVG файл в текстовом редакторе или воспользоваться любым векторным редактором, например Illustrator. Для наглядности здесь я показываю только SVG код из нашего HTML документа (помните, что он находится в теге body). Создаем тег clipPath и добавляем в него SVG форму иконки.

Мы создали путь для иконки в виде сердца. Прошу обратить внимание на аттрибут у тега clipPath.
Через него мы будем ссылаться на форму нашей иконки.

Добавляем иконки

Вставляем в HTML документ нашу иконку. Она состоит из маленького SVG документа, внутрь которого вставлен квадрат:

Сразу видим небольшой недостаток подхода — иконка состоит из двух элементов. Проблема, на мой взгляд, терпимая так как структура у всех иконок абсолютно одинаковая. Если что, можно легко найти/заменить/убрать через поиск по всему проекту.

Обратите внимание на цифру 512. Это размер квадрата в который была вписанна иконка, когда рисовалась в редакторе. С Вашей иконкой может быть иначе. Класс heart-icon для задания формы иконки в CSS, класс icon — объединяющий класс для всех иконок (их же будет масса?).

Последний шаг. Добавляем CSS

Давайте посмотрим что получилось. Если Вы все сделали правильно, то увидите черный квадрат 512 на 512 пикселя. Малевич уже одобряет. Но, боюсь, наш с вами манифест супрематизма никто уже не оценит. Продолжаем.

Все правильно, иконок нет? Приступаем к самому интересному — CSS.

В main.css который мы подключили к документу пишем стили для классов heart-icon и icon.

Наш черный квадрат становится серым и 32х32 пикселя. Свойство fill задает заливку нашей иконки.

Наконец-то появляется форма иконки! clip-path именно то cвойcтво, которое заставляет браузер брать форму по #heart-path и применять ее к квадрату.

Добавим поведение для иконки. Это будут :hover, :active состояния и checked класс.

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

Чтобы добавить новую иконку в нашу систему, нужно всего лишь:

Я добавил иконку плей так как код ее очень простой и хорошо иллюстрирует, что в качестве clip-path можно использовать не только пути, но и любые фигуры (которые поддерживает SVG конечно).

Добавляем внутренюю тень

Для этого мы будем использовать SVG filter.
Сразу предупреждаю. Для данного примера у меня возникали небольшие трудности с иконками при использовании фильтра поверх них. Часть из них иногда исчезала. Иногда. Может только у меня. Будьте на чеку. И еще одна проблема — чтобы фильтр накладывался красиво нужно добавить еще один элемент в иконку. Да, очень жаль. Теперь иконка с фильтром = 3 элемента. Так что если Вам нужно воплатить трендовый флет дизайн, смело перематывайте.

Добавим элемент:
Тэг и есть тот самый элемент, который используется для фильтра.

Добавляем в раздел SVG документа фильтр:

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

Добавляем к иконкам тень

Вот и все. Хочется мне написать. Но это было бы неправдой.

Правда или любим всех

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

Но почему же не находит?! Дело в том, что здесь сталкиваются 2 браузерных мира. Наш путь url(‘#heart-path’) Opera воспринимает как путь относительный файла CSS или url(‘main.css#heart-path’) вместо url(‘index.html#heart-path’), как делают это остальные. Если задать путь эксклюзивно как url(‘index.html#heart-path’), то браузеры не парсят SVG документ внутри index.html, так как считают его внешним источником. Такие же проблемы возникают и у Mozilla, как только Вы переносите main.css за пределы каталога с файлом index.html. IE же в этом вопросе солидарен с WebKit. А WebKit в свою очередь не очень дружит с внешними источниками. Им нужен внутренний.

Разводим миры по углам.

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

Давайте переименуем файл index.html в index.php. После этого создадим папку /css и разместим в ней файл icons.svg, куда перенесем наш большой SVG документ с декларациями форм иконок.

На месте большого SVG документа в index.php напишем PHP выражение

которое включает текст файла icons.svg на то место, где встречается само выражение.
Пункт 3 выполнен, можно вычеркивать.

Теперь пункт 1 и 2.

В каталоге /css создадим файл icons.styl. Это будет именно то одно место, где мы будем редактировать стили наших иконок. Переместим в него все содержимое файла main.css и оформим в виде миксина icons_mixin:

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

В файл webkit_ie.styl добавим:

Импортируем файл с миксином иконок и выполняем его без параметров.
В файл ff_op.styl добавим:

Импортируем файл с миксином иконок и передаем ему путь к icons.svg.

Пункт 1 и 2 выполнены. Вычеркиваем.

Если запутались, вот так выглядит проект:

Источник

Как работать с форматом SVG: руководство для начинающих веб-разработчиков

Файлы в формате SVG «лёгкие» и масштабируемые, а также их можно модифицировать через код. Они обеспечивают высокое качество изображений независимо от размера экрана. С ними можно работать как с обычными изображениями, а также использовать инлайн в HTML. Подробнее о преимуществах формата в статье.

Зачем использовать SVG

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

Масштабирование изображения с сохранением качества pixel perfect

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

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

Сравнение качества растровых и векторных изображений

Возможность модификации

Изображения в формате SVG можно анимировать или стилизовать с помощью CSS. Вы можете изменить цвета, размеры элементов, шрифты и так далее. Элементы векторных изображений можно делать адаптивными.

Небольшой «вес» файлов

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

Файлы в формате JPG чуть «легче» картинок в PNG, но всё равно они слишком «тяжёлые». А изображения SVG представляют собой код, поэтому они «весят» очень мало. Поэтому смело используйте этот формат для создания иконок, логотипов и других элементов интерфейса.

Доступность

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

Использование SVG: распространённые практики

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

Логотипы и иконки в SVG

Логотипы и иконки должны сохранять качество на экранах с любым разрешением. Чёткость нужна всем элементам интерфейса сайта: от маленькой кнопки до экранной заставки.

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

Инфографика

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

Визуальные эффекты

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

Анимация

SVG можно использовать для создания CSS-анимации, поэтому фронтенд-разработчикам не придётся изучать дополнительные техники. Также можно воспользоваться SMIL SVG — инструментом анимации векторных изображений. SMIL обеспечивает разработчикам даже больше возможностей, чем обычная CSS-анимация.

Иллюстрации и рисунки

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

Интерфейсы и приложения

SVG используются для создания сложных интерфейсов, которые интегрируются с насыщенными интернет-приложениями (RIA, rich internet application). Благодаря свойствам формата элементы интерфейса получаются лёгкими, при необходимости анимированными и привлекательными.

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

Изучайте вёрстку на Хекслете В рамках профессии «Верстальщик» вы изучите HTML5 и CSS3, научитесь пользоваться Flex, Grid, Sass, Bootstrap. В процессе обучения сверстаете несколько полноценных лендингов и добавите их в портфолио. Базовые курсы в профессии доступны бесплатно.

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

Файлы в формате SVG можно добавлять на страницы сайта средствами HTML и CSS.

Тег img

Первый способ — URL изображения можно указать в атрибуте src тега img. В этом случае вы работает с форматом так же, как с картинками jpg, png и так далее.

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

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

Изображения в формате SVG можно указывать в свойстве background-image, как фото в других форматах. Ниже пример кода.

Этот способ сохраняет все преимущества векторных изображений, включая высокую четкость на экранах с любым разрешением. Также этот способ позволяет масштабировать, повторять и позиционировать изображения.

Инлайн SVG в HTML

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

Такой подход уменьшает количество http-запросов и сокращает время загрузки страницы. В тегах можно указывать классы и id и использовать их для изменения стилей элемента с помощью CSS.

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

В SVG-файлах используется основанный на XML язык, который описывает векторные изображения. Как и HTML, это язык разметки. Но код SVG позволяет манипулировать элементами, например, применять к ним эффекты.

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

Подробнее о работе с простыми фигурами ниже.

Рисуем с помощью SVG: круг

Чтобы нарисовать круг, необходимо указать три атрибута:

Код, с помощью которого можно нарисовать круг, можно посмотреть ниже. Цвет линии и фона можно указывать инлайн или отдельно.

Круг нарисован с использованием обсуждаемого формата

Рисуем с помощью SVG: прямоугольник

Создание прямоугольников с помощью SVG похоже на рисование окружностей. Достаточно указать координаты центра по осям x и y, а также высоту и ширину для определения размера. Пример кода ниже.

Прямоугольник нарисован с помощью SVG

Рисуем с помощью SVG: линия

Чтобы нарисовать линию, нужно указать координаты по осям x и y двух точек. Также можно указать цвет и толщину линии. Код ниже наверняка выглядит понятнее объяснения словами.

Рисуем с помощью SVG: звезда

С помощью SVG можно рисовать звёзды и другие многоугольники. Для этого достаточно указать координаты точек углов фигуры. Пример кода ниже.

Сложный многоугольник в формате SVG

Рисуем с помощью SVG: пути

С помощью элемента можно рисовать ломаные кривые. Они позволяют создавать объекты разной формы. С помощью атрибута d определяется путь или координаты ломаной линии. Команда M используется для абсолютного позиционирования, а m — для относительного. С помощью команды L определяются координаты новой точки.

Вот пример использования path:

А это пример нескольких линий, созданных с помощью path:

Рисуем с помощью SVG: кривые

Для рисования кривой линии используется команда C. В примере ниже определяются начало кривой, точки смещения и конец кривой.

С помощью команды S можно объединять кривые и создавать сложные формы.

Читайте также Когда роботы заменят верстальщиков на рынке труда: большая обзорная статья о профессии с комментариями экспертов.

Как работать с текстом с помощью SVG

Формат SVG позволяет работать с текстом. Для этого применяется тег

Обычный текст создан с помощью SVG

С помощью свойства stroke можно задать цвет шрифта. Позиция текста на странице определяется координатами x и y. В свойствах stroke и fill можно использовать градиенты.

Как управлять свойствами шрифта с помощью svg

SVG позволяет управлять следующими свойствами шрифта:

С помощью тега можно выбрать одно или несколько слов в тексте и изменить их свойства.

Также SVG позволяет переворачивать текст, менять цвет линии и заполнения букв и выполнять другие трансформации. Ниже пример создания контура текста, написанного справа налево. Последнее определено с помощью свойств direction и unicode-bidi.

можно связывать текст с путями. Это делается с помощью атрибута xlink:href. Пример кода ниже.

Как использовать CSS в SVG

Код CSS можно указывать инлайн в коде SVG. Смотрите пример.

Также можно писать CSS в отдельных файлах и применять стили к элементам SVG. Например, в SVG можно указать класс.

В CSS можно работать с этим классом.

Вместо заключения: как дела с SVG 2.0

SVG 2.0 активно разрабатывается. Продукт находится в стадии предварительной версии (Candidate Recommendation). Браузеры не полностью поддерживают SVG 2.0. В новой версии добавлены некоторые возможности HTML 5 и WOFF (web open font format). Следить за стадиями разработки SVG 2.0 можно на сайте W3C.

Адаптированный перевод статьи All you need to know about SVG on the web by Richard Mattka. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».

Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Источник