Сайт

Svg на сайте: Используем SVG на сайте / Хабр

02.04.1984

Содержание

css — Не работает анимация svg, когда сайт выкладывается на сервер

Проблема следующая

У меня есть условная html страница на которой есть куча svg, анимация которых относительно скролла, часть анимации прописана в отдельном css файле, а другая часть которая касается отдельных (частей) прописана прямо внутри svg-шки.

На компе, когда я открываю html страницу, и те и другие анимации прекрасно работают. Когда я выкладываю на сервер данные html страницы, анимации, которые прописаны для всей svg, так же прекрасно работают, но анимации, css которых прописан прямов svg-шке (в ) работают просто через раз. Точнее даже не так. Обычно она при первой загрузке сайта сработает, а дальше раз 10 не срабатывает и так далее. Думал, что браузер как-то не правильно кэширует картинку уже проанимированную, и вставил Но ничего не поменялось!

Очень буду благодарен за решение проблемы! Всем заранее спасибо!

Подключение картинки:

<img src="img/flower1.svg">

Код внутри svg:

<svg viewBox="0 0 110 140" fill="none" 
xmlns="http://www.
 
 w3.org/2000/svg">
<style>
Здесь код из animate.css (библиотека анимаций)
<style>
<path 
opacity="0.2" d="M58.1824 139.677C72.6425 139.677 84.3647 138.63 
84.3647 137.338C84.3647 136.047 72.6425 135 58.1824 135C43.7222 
135 32 136.047 32 137.338C32 138.63 43.7222 139.677 58.1824 
139.677Z" fill="#31415e"/>
<path d="M21.8789 27.999C21.8789 27.999 63.7524 58.5967 42.2498 
121.32L48.104 121.675C48.104 121.675 65.6326 58.8992 21.8789 
27.999Z" fill="#0083C7"/>
<path d="M99.2719 33.2339C99.2719 33.2339 56.1623 54.3556 65.6072 
114.983L60.2172 114.357C60.2172 114.357 54.4204 54.319 99.2719 
33.2339Z" fill="#0083C7"/>
<path d="M24.6146 38.7457C28.839 31.5435 31.2145 22.0231 32.1768 
17.5041C30.7765 16.1846 30.3514 14.1976 30.0046 12.148C29.6213 
9.87418 27.397 4.35646 27.397 4.35646C26.6668 0.0486789 21.96 
-1.44285 18.7291 1.61327L8.70014 11.0997C1.0832 18.2994 -1.92083 
29.6451 1.24746 39.2307L9.0026 57.0877C9.49284 58.5688 10.4055 
63.372 11.7224 66.1518C12.
 
 004 65.1478 12.2726 63.0226 12.5047 
62.0552C15.6938 49.0406 18.8778 48.5216 24.6146 38.7457Z" 
fill="#85D2DA"/>
<path d="M14.9976 64.5603L34.3255 53.6266C44.2842 47.9941 51.1397 
37.0682 52.1723 25.1853L52.9181 16.5801C53.3249 11.8864 50.154 
10.0246 45.1629 10.9399C43.2385 11.2919 41.288 12.0846 37.6242 
13.8369C36.0075 14.6192 33.8535 17.1277 32.1742 17.4876C31.2146 
22.0066 28.839 31.527 24.612 38.7293C18.8752 48.5052 15.6913 
49.0241 12.5047 62.0388C12.27 62.9958 12.0014 65.1314 11.7224 
66.1353C12.8959 65.1575 13.9076 65.1757 14.9976 64.5603Z" 
fill="#38B9C6"/>
<path d="M89.1228 23.7289C87.8737 24.2296 86.3717 23.9897 85.0809 
22.7954L78.8564 17.0586C76.0219 14.451 73.2891 15.5827 73.6777 
19.6506C73.8185 21.1239 73.4664 26.2348 73.4664 26.2348C73.3934 
36.5897 77.005 43.2443 83.8031 50.0919C86.9323 53.2419 92.085 
60.2825 95.6966 63.2604C96.552 63.967 100.466 67.5603 101.334 
67.4143C99.861 59.2733 97.475 49.8885 94.4919 42.7306C91.9876 
36.6207 90.1864 30.2459 89.1228 23.
 
 
 7289Z" fill="#38B9C6"/>
<path d="M103.812 60.6809C105.963 57.0876 109.262 48.6858 109.786 
43.6375C110.399 37.7078 108.959 29.1574 103.486 21.9708C101.681 
19.6057 101.447 14.3696 100.409 11.9654C98.8885 8.45036 94.0696 
10.101 93.2195 14.2184C92.8231 16.1428 91.4646 20.8287 91.4646 
20.8287C91.0969 22.315 90.2025 23.2955 89.1177 23.7284C90.1822 
30.2409 91.9835 36.6113 94.4868 42.717C97.4699 49.8749 99.8559 
59.2597 101.329 67.4007C102.325 64.6105 100.745 65.8074 103.812 
60.6809Z" fill="#85D2DA"/>
<path d="M66.1545 25.8668C66.1545 25.8668 62.8089 39.8619 59.6354 
66.1519C58.2351 77.7036 58.608 90.5304 58.0708 
102.964H59.9848C59.9848 102.964 58.6262 84.6607 60.5637 
66.3266C62.8063 45.0823 66.1936 29.4054 66.796 25.4366C67.9798 
17.5147 66.1545 25.8668 66.1545 25.8668Z" fill="#0083C7"/>
<path d="M64.1153 38.404C62.2743 38.0259 62.11 35.0715 62.7228 
32.636C64.2326 26.6385 66.4465 16.4062 68.2719 11.1831C69.0854 
8.85974 69.4896 6.92748 70.1806 6.96138L70.5613 6.99789C71.
 
 3045 
7.38642 71.5418 9.11268 71.3619 10.6329C70.6552 16.5965 68.8325 
28.3647 67.5495 34.4587C67.0306 36.9203 65.9588 38.7847 64.1153 
38.404Z" fill="#FBB157"/>
<path d="M32.1245 61.4712C32.1245 61.4712 39.452 65.8442 44.8186 
83.8967C50.1851 101.949 53.7628 103.897 53.7628 103.897L52.1148 
104.552C48.1094 97.0964 44.0311 88.4783 42.4013 81.6776C38.7401 
66.4622 32.1245 61.4712 32.1245 61.4712Z" fill="#38B9C6"/>
<path d="M47.4627 97.6439C47.4627 97.6439 41.5277 88.2148 39.7232 
78.1546C37.9187 68.0944 34.1559 63.5258 32.1245 61.4658C32.1245 
61.4658 38.7401 66.4542 42.4013 81.6722C44.0363 88.4729 48.1094 
97.0911 52.1147 104.546L51.1447 104.932L47.4627 97.6439Z" 
fill="#85D2DA"/>
<path d="M84.0797 55.5386C84.0797 55.5386 76.056 60.4487 70.3609 
80.4152C64.6658 100.382 60.7439 102.58 60.7439 102.58L62.5692 
103.281C66.8927 95.0126 71.2762 85.4635 72.9998 77.9484C76.8461 
61.1189 84.0797 55.5386 84.0797 55.5386Z" fill="#38B9C6"/>
<path d="M67.6123 95.5993C67.6123 95.
 
 
 5993 74.0401 85.1324 75.9072 
74.0213C77.7742 62.9103 81.8631 57.8281 84.0796 55.5386C84.0796 
55.5386 76.8459 61.1189 72.997 77.938C71.276 85.4531 66.8925 
95.0022 62.5664 103.271L63.6408 103.686L67.6123 95.5993Z" 
fill="#85D2DA"/>
<path d="M72.4126 41.5225C72.4126 41.5225 64.8765 48.344 62.8295 
70.6912C60.7825 93.0385 57.0588 96.1467 57.0588 96.1467L59.1449 
96.5275C62.0785 86.8793 64.8218 75.8569 65.1425 67.5308C65.8466 
48.8968 72.4126 41.5225 72.4126 41.5225Z" fill="#38B9C6"/>
<path d="M62.955 87.3669C62.955 87.3669 67.68 74.9625 67.4375 
62.7902C67.195 50.6178 70.5171 44.3987 72.4103 41.5225C72.4103 
41.5225 65.8469 48.8968 65.1324 67.5308C64.8116 75.8569 62.0684 
86.8793 59.1348 96.5275L60.3578 96.7491L62.955 87.3669Z" 
fill="#85D2DA"/>
<path d="M54.4382 26.0806C54.4382 26.0806 62.3239 36.9569 58.8713 
66.4073C55.4187 95.8577 59.3928 100.893 59.3928 100.893L56.6026 
100.817C55.4396 87.542 54.8998 72.5482 56.7565 61.7032C60.9157 
37.4054 54.4382 26.0806 54.4382 26.
 
 0806Z" fill="#38B9C6"/>
<path d="M54.1592 87.9332C54.1592 87.9332 51.4315 70.6082 55.064 
54.9338C58.6966 39.2595 56.1071 30.3179 54.4304 26.0806C54.4304 
26.0806 60.9079 37.4054 56.7538 61.6927C54.8971 72.5483 55.45 
87.542 56.6 100.807L54.9571 100.763L54.1592 87.9332Z" 
fill="#85D2DA"/>
<path d="M75.023 135.162h46.4376L35.6031 125.822L32.899 
124.453L30.44 96.8928L28.3695 96.5434L27.5898 
91.4116H83.8395L83.0598 96.5278L80.9528 96.9971L78.2617 
124.228L75.9435 125.84L75.023 135.162Z" fill="#485E88"/>
</svg>
  • css
  • svg
  • анимация
  • css-animation

2

Когда вы добавляете файл SVG в HTML с помощью тега

<img> становится невозможно его стилизовать, svg теряет интерактивность. То есть поведение ничем не отличается от растровой картинки, добавленной с помощью <img>

Поэтому лучше добавлять SVG файл с помощью тега <object>

<html>
<head>
<title></title>
</head>
<body>
  <div>
  <object type="image/svg+xml" data="img/flower1. svg"> </object>
  </div>
</body>
</html>

P.S Из-за политики безопасности в Chrome на локальном ПК работать не будет. Проверяйте, настраивайте в Firefox, либо на сервере, там Chrome работает с

<object>

3

Ваш ответ

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как использовать изображение в png или svg на сайте?

Графика для сайта

Updated 31 May 2022

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

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

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

Что представляет собой изображение в PNG?

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

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

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

Ключевые особенности формата

На самом деле, изображение в формате png вырвалось в лидеры всемирной паутины далеко не на пустом месте. Это обусловлено множеством достоинств, которые присущи указанному типу расширения.

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

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

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

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

Когда стоит загрузить png-изображение

Расширение ПНГ распространилось настолько широко в первую очередь благодаря своей универсальности. Его уместно использовать практически везде, если описанные ранее недостатки не окажут негативного воздействия на конечный результат.

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

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

Что такое svg изображения?

SVG – это аббревиатура от слов Scalable Vector Graphics. На данный момент указанное расширение по праву является самым популярным типом векторной графики в Internet-сети. и является наиболее широко используемым форматом векторных файлов в Интернете.  Такой тип обработки данных привел к обеспечению хорошей масштабируемости без ущерба для качества содержимого. Вне зависимости от того, насколько его геометрические размеры сжаты или растянуты, он сохраняет читаемость и четкость, что удобно при решении множества различных задач.

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

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

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

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

На что стоит обратить внимание при работе с svg?

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

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

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

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

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

Когда использовать представленный формат?

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

Среди наиболее распространенных вариантов применения можно выделить:

  • Логотипы;
  • Графики и диаграммы;
  • Значки и кнопки на сайте.

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

Обобщая сказанное, можно сделать вывод о том, что СВГ станет идеальным решением в случае необходимости работы с простыми картинками, при функционировании которых могут потребоваться анимационные манипуляции.

Сравнительный анализ Image-расширений

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

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

Так, SVG-контент хорошо работает с анимированными вставками, обеспечивая высокий уровень читаемости при изменении масштаба просмотра, что абсолютно недоступно для ПНГ и его анимационных аналогов GIF или APNG.

В свою очередь, PNG-контент – это, как правило, сложные графические структуры, в число которых могут войти:

  • Фотографии;
  • Скриншоты;
  • Сканы документов.

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

Работа с форматом SVG в Illustrator

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

Битовые форматы изображения для Интернета (GIF, JPEG, WBMP и PNG) описывают изображения с помощью сетки пикселей. Файлы получаются большими с одним (часто низким) разрешением и занимают значительную часть полосы пропускания. В отличие от этого, SVG — это векторный формат, описывающий изображения как фигуры, контуры, текст и эффекты фильтра. Полученные файлы компактны и обеспечивают качественную графику в Интернете, на печати и даже портативных устройствах с ограниченными ресурсами. Пользователи могут увеличить изображение SVG на экране без потери резкости, деталей или четкости. Кроме того, формат SVG отлично поддерживает текст и цвета, и пользователи всегда видят изображения таким, как оно выглядит в монтажной области Illustrator.

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

Можно сохранить работу в формате SVG, используя команду «Сохранить», Сохранить как, «Сохранить копию» или Сохранить для Web и устройств. Для доступа к полному набору параметров экспорта в формате SVG используйте команды «Сохранить», Сохранить как или «Сохранить копию». Команда Сохранить для Web и устройств предоставляет ограниченный набор параметров экспорта в формате SVG (только те, которые используются для работы в Интернете).

Настройки объекта в Illustrator влияют на то, каким будет файл SVG. Помните следующие рекомендации.

  • Используйте слои для добавления структуры в файл SVG. Если объект сохраняется в формате SVG, каждый слой преобразуется в групповой элемент (<g>). (Например, слой «Button1» становится <g id=»Button1_ver3.0″>.) Вложенные слои становятся вложенными группами SVG, а скрытые слои сохраняются со свойством «отображение: нет» стиля SVG.

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

  • Растровые данные не масштабируются в средстве просмотра SVG и не могут отредактироваться, как другие элементы SVG. Старайтесь не создавать объекты, которые будут растрироваться в файле SVG. Сетчатые градиенты и объекты с градиентной заливкой, использующие эффекты «Растрировать», «Имитация», «Размытие», «Штрихи», «Искажение», «Оформление», «Резкость», «Эскиз», «Стилизация», «Текстура» и «Видео», растрируются при сохранении в формате SVG. Графические стили с этими эффектами также вызывают растрирование. Добавляя графические объекты, используйте эффекты SVG, не вызывающие растрирования.

  • Для повышения производительности файла SVG используйте символы в объекте и упрощайте контуры. Кроме того, если в первую очередь требуется производительность, старайтесь не пользоваться кистями, которые производят большое количество данных контура («Угольно-серый», «Пепел», «Ручка»).

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

  • Язык сценариев (например, JavaScript) открывает неограниченные функциональные возможности для файла SVG. Перемещения с помощью курсора и клавиатуры могут вызвать сценарные функции (например, эффекты прокрутки). Сценарии могут также использовать объектную модель документов (DOM) для обращения к файлу SVG и внесения изменений (например, для вставки или удаления элементов SVG).

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

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

Чтобы изменить фильтры SVG, которые Illustrator использует по умолчанию, используйте текстовый редактор для редактирования файла Adobe SVG Filters.svg в папке Documents and Settings/<каталог_пользователя>/Application Data/Adobe/Adobe Illustrator CS5 Settings/<язык>. Можно изменить или удалить существующие определения фильтра, а также добавить новые.

Палитра «Интерактивность SVG» (Окно > Интерактивность SVG) используется для добавления интерактивности в объект при его экспорте для просмотра в веб-браузере. Например, создав событие, запускающее команду языка JavaScript, можно быстро создать движение на веб-странице, когда пользователь выполняет такое действие, как перемещение курсора мыши над объектом. Палитра «Интерактивность SVG» позволяет также увидеть все события и файлы JavaScript, связанные с текущим файлом.

Удаление события из палитры «Интерактивность SVG»

onfocusin

Запускает действие, когда элемент получает фокус (например, выделение курсором).

onfocusout

Запускает действие, когда элемент теряет фокус (часто при переходе фокуса другому элементу).

onactivate

Запускает действие по щелчку кнопки мыши или нажатию клавиши в зависимости от элемента SVG.

onmousedown

Запускает действие, когда пользователь нажимает кнопку мыши на элементе.

onmouseup

Запускает действие, когда пользователь отпускает кнопку мыши на элементе.

onclick

Запускает действие по щелчку кнопки мыши на элементе.

onmouseover

Запускает действие при наведении курсора на элемент.

onmousemove

Запускает действие, когда курсор находится на элементе.

onmouseout

Запускает действие, когда пользователь уводит курсор с элемента.

onkeydown

Запускает действие при нажатии клавиши.

onkeypress

Запускает действие, когда пользователь держит клавишу нажатой.

onkeyup

Запускает действие, когда пользователь отпускает клавишу.

onload

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

onerror

Запускает действие при неправильной загрузке элемента или другой ошибке.

onabort

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

onunload

Запускает действие при удалении документа SVG из окна или кадра.

onzoom

Запускает действие, когда меняется масштаб для документа.

onresize

Запускает действие, когда меняется размер окна просмотра документа.

onscroll

Запускает действие при прокрутке или панорамировании окна просмотра документа.

Добавлен новый параметр экспорта в формате SVG (Файл > Экспорт > SVG). Для создания стандартизированных файлов SVG, оптимизированных для Интернета, для проектов в области веб-дизайна и дизайна графического интерфейса пользователя используется новый рабочий процесс.

Доступны следующие варианты:

  • Стили: выберите способ хранения информации о визуальных стилях в разметке SVG.
    • Атрибуты презентации: использует отдельные атрибуты XML для каждого отдельного свойства стиля в каждом теге SVG. Этот формат необходим для использования ресурсов SVG с Android Studio.
    • Внутренний CSS: использует один тег <style> с классами CSS, разделяя настройки стиля между объектами, имеющими одинаковые стили. Это может привести к уменьшению размера файла.
    • Встроенный стиль: использует один атрибут style для каждого тега SVG, содержащий все свойства стиля тега, объединенные в синтаксисе CSS.

Примечание. Стиль по умолчанию для SVG имеет значение Атрибуты презентации, потому что он улучшает совместимость с распространенными инструментами разработчика, например Android Studio.

  • Шрифт. Выберите представление шрифтов в файле SVG. Контуры сохраняют определение линии  и  являются самыми совместимыми.
  • Изображения. Выберите, нужно ли при сохранении встроить изображения в документ или привязать их к документу.
  • ID объектов. Выберите способ назначения типов идентификатора (имен) объектам в файле SVG. Доступные варианты: «Имена слоев», «Минимальный» и «Уникальный». Этот параметр определяет способ обработки одинаковых имен объектов, а также именование объектов в экспортируемом файле CSS.
  • Десятичное значение. Выберите объем информации, который необходимо сохранить в зависимости от требуемой точности местоположения объектов. При увеличении десятичного значения увеличивается точность размещения объектов и, соответственно, увеличивается качество отображения визуализируемых файлов SVG. Однако при увеличении десятичного значения также увеличивается размер получаемого в результате экспорта файла SVG.
  • Уменьшить. Оптимизирует размер файла в формате SVG путем удаления пустых групп и пробелов. При выборе этого параметра также снижается удобочитаемость полученного кода SVG.
  • Адаптивный SVG. При установке этого параметра обеспечивается масштабирование созданного SVG в окне браузера. Абсолютные значения не используются.
  • Показать код. Открывает экспортированное содержимое в текстовом редакторе по умолчанию.
  • Показать в браузере (значок). Открывает изображение в веб-браузере по умолчанию.

SVG: руководство по написанию кода изображений (с примерами)

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

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

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

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

Это открывает множество интересных возможностей. Внезапно оказывается, что мы можем получить доступ к частям изображения из JavaScript или установить стиль из CSS. Мы можем анимировать части изображения с помощью JavaScript или сделать его интерактивным. А можно и наоборот — сгенерировать графику из кода.

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

Так как же SVG выглядят изнутри? В этом руководстве мы рассмотрим исходный код нескольких SVG-изображений, чтобы охватить основы.

Тег SVG

Во-первых, мы должны поговорить о самом теге svg. Этот тег содержит элементы изображения и определяет рамку нашей картинки. Он устанавливает внутренний и внешний размер изображения.

Свойства width и height определяют, сколько места изображение занимает в браузере. Также часто применяется свойство viewBox. Оно определяет систему координат для элементов внутри изображения.

Поскольку все эти свойства определяют размер, это может сбивать с толку. Но вы можете считать, что width и height SVG — это внешний размер, а viewBox — внутренний.

Размер, определяемый при помощи width и height, — это то, как остальной HTML представляет изображение и насколько большим оно отображается в браузере. Размер, определяемый viewBox, — это то, как элементы изображения представляют это изображение в целом, когда позиционируют себя внутри него.

В следующем примере у нас есть три SVG с одинаковым содержанием. Элементы circle имеют одинаковые координаты центра и радиус. Но вид их совершенно разный.

В центральном примере размер, определенный при помощи width и height, совпадает с размером, определенным viewBox.

В первом примере мы видим, что происходит, когда width и height меньше. Изображение попросту сжимается, поскольку все координаты и размеры, определенные внутри изображения, все равно равняются по viewBox.

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

Свойство viewBox также определяет центр системы координат, в которой располагаются элементы изображения.

Первые два числа определяют координаты верхнего левого угла изображения. Значения координат растут вправо и вниз. В этой статье мы будем центрировать системы координат. Значение координат 0,0 всегда будет в центре изображения.

И еще одно. Хотя мы можем встраивать SVG-изображения в HTML-файл, это не означает, что мы можем свободно комбинировать любые теги SVG с любыми тегами HTML.

Тег SVG представляет фрейм изображения. Каждый SVG-элемент должен находиться внутри тега SVG. И наоборот: HTML-теги не могут находиться внутри тега SVG, так что мы не можем взять и вставить в SVG тег div или header. Но не волнуйтесь: вам будут доступны похожие теги.

Создаем елочную игрушку при помощи SVG

Начнем с простенького: с елочного шарика. Мы будем использовать только простые формы: прямоугольник и два круга.

Размещать и стилизовать эти элементы мы будем при помощи атрибутов. Для круга мы определяем позицию центра, и для прямоугольника — верхний левый угол. Эти позиции всегда относительны, они привязываются к системе координат, определенной viewBox.

<html>
  <svg viewBox="-100 -100 200 200”>
    <circle cx="0" cy="20" r="70" fill="#D1495B" />
    <circle
      cx="0"
      cy="-75"
      r="12"
      fill="none"
      stroke="#F79257"
      stroke-width="2"
    />
    <rect x="-17.5" y="-65" fill="#F79257" />
  </svg>
</html>

Не забывайте: мы сдвинули центр системы координат к середине изображения, при этом значения по оси X растут вправо, а по оси Y — вниз.

У нас также есть атрибуты для стилизации наших форм. В отличие от HTML, для установки цвета фигуры мы не используем свойство background-color. Вместо него применяется атрибут fill («заливка»).

А чтобы задать контур фигуры, у нас есть обводка — stroke и stroke-width. Обратите внимание, что мы используем элемент circle как для отрисовки кольца, так и для отрисовки шарика, только применяем разные атрибуты.

Создаем новогоднюю елочку

Переходим к елке. Всегда пользоваться только простыми фигурами для составления изображений не получится. Самый простой способ нарисовать фигуру произвольной формы — использовать polygon (многоугольник). Здесь мы устанавливаем список точек, связанных прямыми линиями.

<html>
  <svg viewBox="-100 -100 200 200">
    <polygon points="0,0 80,120 -80,120" fill="#234236" />
    <polygon points="0,-40 60,60 -60,60" fill="#0C5C4C" />
    <polygon points="0,-80 40,0 -40,0" fill="#38755B" />
    <rect x="-20" y="120" fill="brown" />
  </svg>
</html>

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

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

Создаем пряничного человечка

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

Но это касается только атрибутов, связанных с внешним видом. Позиционные атрибуты и атрибуты, определяющие форму, должны остаться в HTML. А вот цвета, контуры и шрифты можно сбросить в CSS.

<svg viewBox="-100 -100 200 200">
  <circle cx="0" cy="-50" r="30" />
  <circle cx="-12" cy="-55" r="3" />
  <circle cx="12" cy="-55" r="3" />
  <rect x="-10" y="-40" rx="2" />
  <line x1="-40" y1="-10" x2="40" y2="-10" />
  <line x1="-25" y1="50" x2="0" y2="-15" />
  <line x1="25" y1="50" x2="0" y2="-15" />
  <circle cx="0" cy="-10" r="5" />
  <circle cx="0" cy="10" r="5" />
</svg>
. gingerbread .body {
  fill: #cd803d;
}
.gingerbread .eye {
  fill: white;
}
.gingerbread .mouth {
  fill: none;
  stroke: white;
  stroke-width: 2px;
}
.gingerbread .limb {
  stroke: #cd803d;
  stroke-width: 35px;
  stroke-linecap: round;
}

Мы уже знакомы с fill и некоторыми свойствами stroke. Давайте познакомимся с еще одним — stroke-linecap. Этот атрибут управляет способом обводки. С его помощью можно сделать концы линий закругленными.

Обратите внимание, что руки и ноги человека — простые линии. Если мы удалим закругление концов и установим меньшее значение stroke-width, мы это заметим. За счет толщины линии и скругления концов мы придаем линиям вид рук и ног нашей фигурки.

Еще обратите внимание на свойство rx в прямоугольнике. Оно определяет рот человечка. С помощью этого свойства задается радиус x углов прямоугольника и создаются округлые углы. Если вам так привычнее, можете считать, что это border-radius.

Создаем звезду

Переходим к звездочке. Звезда — простая форма, так что мы можем определить ее при помощи нескольких многоугольников (polygon), задавая каждую точку отдельно. Но для этого нам нужно знать все координаты.

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

<svg viewBox="-100 -100 200 200">      
  <g transform="translate(0 5)">
    <g>
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
    <g transform="rotate(72)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
    <g transform="rotate(-72)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
    <g transform="rotate(144)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
    <g transform="rotate(-144)">
      <polygon points="0,0 36,-50 0,-100" fill="#EDD8B7" />
      <polygon points="0,0 -36,-50 0,-100" fill="#E5C39C" />
    </g>
  </g>
</svg>

В этом примере каждый луч состоит из двух многоугольников. Они должны вращаться вместе, поэтому мы группируем их при помощи тега g, а затем применяем rotate к обоим сразу.

Можете считать, что тег g — что-то вроде div в HTML. Сам по себе он ничего не представляет. Но он может содержать другие элементы и атрибуты, определенные для группы и применяемые для всех его потомков.

Группы могут быть встроенными. При помощи внешней группы мы translate (перемещаем) всю звезду на 5 юнитов вниз.

Создаем снежинку

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

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

<svg viewBox="-100 -100 200 200">
  <defs>
    <path
     
      d="
        M 0 0 L 0 -90
        M 0 -20 L 20 -34
        M 0 -20 L -20 -34
        M 0 -40 L 20 -54
        M 0 -40 L -20 -54
        M 0 -60 L 20 -74
        M 0 -60 L -20 -74"
      stroke="#E5C39C"
      stroke-width="5"
    />
  </defs>
  <use href="#branch" />
  <use href="#branch" transform="rotate(60)" />
  <use href="#branch" transform="rotate(120)" />
  <use href="#branch" transform="rotate(180)" />
  <use href="#branch" transform="rotate(240)" />
  <use href="#branch" transform="rotate(300)" />
</svg>

Луч определен как path. Вообще, path («путь») — самый мощный тег SVG. С его помощью можно определить очень много всего, и если вы откроете любой SVG-файл, вы увидите практически одни path.

Форма path определена атрибутом d. Здесь мы определяем несколько команд рисования. Команда всегда начинается с буквы, определяющей тип команды, и заканчивается координатами.

У нас всего две простые команды: «сдвинуть к…» (move to, M) и «провести линию к…» (line to, L). Команда move to перемещает курсор к определенной точке без рисования линии, а команда line to рисует ровную линию из предыдущей точки.

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

Этот path немного необычен, потому что в нем есть несколько команд move to для отрисовки главного луча и такой же path для отрисовки боковых.

Создаем волнистую елочку

Элемент path проявляет свою мощь на полную силу, когда мы начинаем использовать кривые. Например, квадратичную кривую Безье, которая определяет не только конечную точку сегмента, но и контрольную точку. Контрольная точка — это невидимые координаты, в сторону которых линия искривляется. При этом искривленная линия самой контрольной точки не касается.

<svg viewBox="-100 -200 200 400">
  <path
    d="
      M 0 -80
      Q 5 -75 0 -70
      Q -10 -65 0 -60
      Q 15 -55 0 -50
      Q -20 -45 0 -40
      Q 25 -35 0 -30
      Q -30 -25 0 -20
      Q 35 -15 0 -10
      Q -40 -5 0 0
      Q 45 5 0 10
      Q -50 15 0 20
      Q 55 25 0 30
      Q -60 35 0 40
      Q 65 45 0 50
      Q -70 55 0 60
      Q 75 65 0 70
      Q -80 75 0 80
      Q 85 85 0 90
      Q -90 95 0 100
      Q 95 105 0 110
      Q -100 115 0 120
      L 0 140
      L 20 140
      L -20 140"
    fill="none"
    stroke="#0C5C4C"
    stroke-width="5"
  />
</svg>

Здесь у нас серия квадратичных кривых Безье (Q), в которых контрольная точка все удаляется и удаляется от центра дерева по мере того как path опускается вниз.

Создаем колокольчик

Хотя квадратичная кривая Безье (Q) отлично подходит для искривления линий, часто она недостаточно гибка.

А вот в кубической кривой Безье (C) у нас появляется не одна контрольная точка, а две. Первая устанавливает начальное направление кривой, а вторая определяет, с какой стороны кривая должна попасть в свою конечную точку.

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

В следующем примере мы создаем форму колокольчика, используя и квадратичные, и кубические кривые Безье.

Низ колокольчика определяется прямыми линиями. Затем начинается квадратичная кривая Безье (формирует изгиб стенки колокольчика), которая переходит в кубическую (для формирования купола). Затем мы достигаем нижней части, где идет еще одна квадратичная кривая.

Итоги

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

Эта статья — лишь вступление. Если добавить к SVG еще и JavaScript, мы выйдем на качественно новый уровень.

Если хотите посмотреть больше примеров создания SVG-изображений при помощи кода, вот вам видео:

Перевод статьи «SVG Tutorial – How to Code Images with 7 Examples».

SVG картинка на сайте, почему не вставляется, почему опасно » Вебстудия 11

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

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

Есть плагины для WordPress которые отключают безопасность и позволяют загружать svg. Плагины: SVG Support, Safe SVG, и др.

Safe SVG — чуть лучше, он перед загрузкой проверяет или svg картинка продезинфицирована (безопасна).

Но в любом случае, разрешая svg картинки даете инструменты для взлома, для вирусов и тп, поэтому лучше обойтись без svg.

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

Есть еще два варианта как вставить svg на сайт (не только на WordPress но и на обычный HTML сайт).

Пример сайта:

  • http://www.jekyllnow.com/
  • https://github.com/barryclark/jekyll-now/blob/master/_sass/_svg-icons.scss

Там снизу сайта есть svg иконки соц сетей, но они не подключены как svg файл. Там код svg картинок прописан как стили в файл css стилей.

&lt;a href="http://github.com/barryclark/jekyll-now"&gt;&lt;i&gt;&lt;/i&gt;&lt;/a&gt;
&lt;styl=e&gt;
. svg-icon.github {
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4IiB2aWV3Qm94PSIwIDAgNjAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPg0KICAgIDxwYXRoIGQ9Ik0wLjMzNjg3MTAzMiwzMCBDMC4zMzY4NzEwMzIsMTMuNDMxNDU2NyAxMy41NjcyMzEzLDAgMjkuODg3NzA5NywwIEM0Ni4yMDgxODgsMCA1OS40Mzg1NDgzLDEzLjQzMTQ1NjcgNTkuNDM4NTQ4MywzMCBDNTkuNDM4NTQ4Myw0Ni41Njg1NDMzIDQ2LjIwODE4OCw2MCAyOS44ODc3MDk3LDYwIEMxMy41NjcyMzEzLDYwIDAuMzM2ODcxMDMyLDQ2LjU2ODU0MzMgMC4zMzY4NzEwMzIsMzAgWiBNMC4zMzY4NzEwMzIsMzAiIGlkPSJHaXRodWIiIGZpbGw9IiMzMzMzMzMiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4NCiAgICA8cGF0aCBkPSJNMTguMjE4NDI0NSwzMS45MzU1NTY2IEMxOS42MDY4NTA2LDM0LjQ1MDc5MDIgMjIuMjg0NTI5NSwzNi4wMTU2NzY0IDI2LjgwMDcyODcsMzYuNDQ4NTE3MyBDMjYuMTU2MTAyMywzNi45MzY1MzM1IDI1LjM4MTc4NzcsMzcuODYzMDk4NCAyNS4yNzQ5ODU3LDM4LjkzNDI2MDcgQzI0LjQ2NDQzNDgsMzkuNDU3NDc0OSAyMi44MzQ3NTA2LDM5LjYyOTY2IDIxLjU2NzQzMDMsMzkuMjMxMDY1OSBDMTkuNzkxODQ2OSwzOC42NzE3MDIzIDE5LjExMTkzNzcsMzUuMTY0MjY0MiAxNi40NTMzMzA2LDM1LjY2MzY5NTkgQzE1Ljg3NzM2MjYsMzUuNzcyMTQ0IDE1Ljk5MTc5MzMsMzYuMTUwNzYwOSAxNi40ODk1NjcsMzYuNDcyMjk5OCBDMTcuMzAwMTE3OSwzNi45OTU1MTQxIDE4LjA2Mjk4OTQsMzcuNjUwMDA3NSAxOC42NTEzNTQxLDM5LjA0MzY2IEMxOS4xMDMzNTU0LDQwLjExMzg3MSAyMC4wNTMxMzA0LDQyLjAyNTk4MTMgMjMuMDU2OTM2OSw0Mi4wMjU5ODEzIEMyNC4yNDg5MjM2LDQyLjAyNTk4MTMgMjUuMDg0MjY3OSw0MS44ODMyODY1IDI1LjA4NDI2NzksNDEuODgzMjg2NSBDMjUuMDg0MjY3OSw0MS44ODMyODY1IDI1LjEwNzE1NCw0NC42MTQ0NjQ5IDI1LjEwNzE1NCw0NS42NzYxMTQyIEMyNS4xMDcxNTQsNDYuOTAwNDM1NSAyMy40NTA3NjkzLDQ3LjI0NTc1NjkgMjMuNDUwNzY5Myw0Ny44MzQ2MTA4IEMyMy40NTA3NjkzLDQ4LjA2NzY3OSAyMy45OTkwODMyLDQ4LjA4OTU1ODggMjQuNDM5NjQxNSw0OC4wODk1NTg4IEMyNS4zMTAyNjg1LDQ4LjA4OTU1ODggMjcuMTIyMDg4Myw0Ny4zNjQ2NjkzIDI3LjEyMjA4ODMsNDYuMDkxODMxNyBDMjcuMTIyMDg4Myw0NS4wODA2MDEyIDI3LjEzODI5OTMsNDEuNjgwNjU5OSAyNy4xMzgyOTkzLDQxLjA4NjA5ODIgQzI3LjEzODI5OTMsMzkuNzg1NjczIDI3LjgzNzI4MDMsMzkuMzczNzYwNyAyNy44MzcyODAzLDM5LjM3Mzc2MDcgQzI3LjgzNzI4MDMsMzkuMzczNzYwNyAyNy45MjQwNTcsNDYuMzE1Mzg2OSAyNy42NzA0MDIyLDQ3LjI0NTc1NjkgQzI3LjM3Mjg4MjMsNDguMzM5NzUwNCAyNi44MzYwMTE1LDQ4LjE4NDY4ODcgMjYuODM2MDExNSw0OC42NzI3MDQ5IEMyNi44MzYwMTE1LDQ5LjM5ODU0NTggMjkuMDE2ODcwNCw0OC44NTA1OTc4IDI5LjczOTY5MTEsNDcuMjU3MTcyNSBDMzAuMjk4NDk0NSw0Ni4wMTY2NzkxIDMwLjA1NDM3NTYsMzkuMjA3MjgzNCAzMC4wNTQzNzU2LDM5LjIwNzI4MzQgTDMwLjY1MDM2OSwzOS4xOTQ5MTY1IEMzMC42NTAzNjksMzkuMTk0OTE2NSAzMC42ODM3NDQ2LDQyLjMxMjMyMjIgMzAuNjYzNzE5Miw0My43MzczNjc1IEMzMC42NDI3NDAyLDQ1LjIxMjgzMTcgMzAuNTQyNjEzNCw0Ny4wNzkyNzk3IDMxLjQyMDg2OTIsNDcuOTU5MjMwOSBDMzEuOTk3NzkwNyw0OC41Mzc2MjA1IDMzLjg2ODczMyw0OS41NTI2NTYyIDMzLjg2ODczMyw0OC42MjUxNCBDMzMuODY4NzMzLDQ4LjA4NTc1MzYgMzIuODQzNjI0NSw0Ny42NDI0NDg1IDMyLjg0MzYyNDUsNDYuMTgzMTU2NCBMMzIuODQzNjI0NSwzOS40Njg4OTA1IEMzMy42NjE4MDQyLDM5LjQ2ODg5MDUgMzMuNTM4NzkxMSw0MS42NzY4NTQ3IDMzLjUzODc5MTEsNDEuNjc2ODU0NyBMMzMuNTk4ODY3Myw0NS43Nzg4NTQ0IEMzMy41OTg4NjczLDQ1Ljc3ODg1NDQgMzMuNDE4NjM4OSw0Ny4yNzMzNDQ2IDM1LjIxOTAxNTYsNDcuODk5Mjk5MSBDMzUuODU0MTA2MSw0OC4xMjA5NTE3IDM3LjIxMzkyNDUsNDguMTgwODgzNSAzNy4yNzc4MTUsNDcuODA4OTI1NyBDMzcuMzQxNzA1NSw0Ny40MzYwMTY3IDM1LjY0MDUwMjEsNDYuODgxNDA5NiAzNS42MjUyNDQ2LDQ1LjcyMzY3OTEgQzM1LjYxNTcwODgsNDUuMDE3ODE1NSAzNS42NTY3MTMxLDQ0LjYwNTkwMzIgMzUuNjU2NzEzMSw0MS41Mzc5NjUxIEMzNS42NTY3MTMxLDM4LjQ3MDAyNyAzNS4yNDM4MDg5LDM3LjMzNjA3OSAzMy44MDQ4NDI2LDM2LjQzMjM0NTMgQzM4LjI0NTcwODIsMzUuOTc2NjczMiA0MC45OTM5NTI3LDM0Ljg4MDY4MiA0Mi4zMzM3NDU4LDMxLjk0NTA2OTUgQzQyLjQzODM2MTksMzEuOTQ4NDk2NiA0Mi44NzkxNDkxLDMwLjU3Mzc3NDIgNDIuODIxOTgzNSwzMC41NzQyNDgyIEM0My4xMjIzNjQyLDI5LjQ2NTk4NTMgNDMuMjg0NDc0NCwyOC4xNTUwOTU3IDQzLjMxNjg5NjQsMjYuNjAyNTc2NCBDNDMuMzA5MjY3NywyMi4zOTMwNzk5IDQxLjI4OTU2NTQsMjAuOTA0Mjk3NSA0MC45MDE0NTQ2LDIwLjIwNTA5MyBDNDEuNDczNjA4MiwxNy4wMTgyNDI1IDQwLjgwNjA5NTYsMTUuNTY3NTEyMSA0MC40OTYxNzkxLDE1LjA2OTk4MjkgQzM5LjM1MTg3MTksMTQuNjYzNzc4NCAzNi41MTQ5NDM1LDE2LjExNDUwODggMzQuOTY1MzYwOCwxNy4xMzcxNTQ4IEMzMi40MzgzNDksMTYuMzk5ODk4NCAyNy4wOTgyNDg2LDE2LjQ3MTI0NTggMjUuMDk1NzEwOSwxNy4zMjc0MTQ2IEMyMS40MDA1NTIyLDE0LjY4NzU2MDggMTkuNDQ1Njk0LDE1LjA5MTg2MjggMTkuNDQ1Njk0LDE1LjA5MTg2MjggQzE5LjQ0NTY5NCwxNS4wOTE4NjI4IDE4LjE4MjE4ODEsMTcuMzUxMTk3IDE5LjExMTkzNzcsMjAuNjU2OTU5OCBDMTcuODk2MTExMywyMi4yMDI4MjAxIDE2Ljk5MDIwMTQsMjMuMjk2ODEzNiAxNi45OTAyMDE0LDI2LjE5NjM3MTggQzE2Ljk5MDIwMTQsMjcuODI5NzUxNiAxNy4xODI4MjY0LDI5LjI5MTg5NzYgMTcuNjE3NjYzMiwzMC41Njg1NDA0IEMxNy41NjQzNTc3LDMwLjU2ODQwOTMgMTguMjAwODQ5MywzMS45MzU5Nzc3IDE4LjIxODQyNDUsMzEuOTM1NTU2NiBaIE0xOC4yMTg0MjQ1LDMxLjkzNTU1NjYiIGlkPSJQYXRoIiBmaWxsPSIjRkZGRkZGIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+DQogICAgPHBhdGggZD0iTTU5LjQzODU0ODMsMzAgQzU5LjQzODU0ODMsNDYuNTY4NTQzMyA0Ni4yMDgxODgsNjAgMjkuODg3NzA5Nyw2MCBDMjMuODM0ODMwOCw2MCAxOC4yMDY5OTU0LDU4LjE1MjUxMzQgMTMuNTIxNjE0OCw1NC45ODI3NzU0IEw0Ny4zODE4MzYxLDUuODE5NDExMDMgQzU0LjY5MzczNDEsMTEuMjgwNjUwMyA1OS40Mzg1NDgzLDIwLjA3Nzc5NzMgNTkuNDM4NTQ4MywzMCBaIE01OS40Mzg1NDgzLDMwIiBpZD0icmVmbGVjIiBmaWxsLW9wYWNpdHk9IjAuMDgiIGZpbGw9IiMwMDAwMDAiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4NCjwvc3ZnPg==)
}
&lt;/styl=e&gt;

Ниже даю видеоурок на английском.

В уроке показаны два варианта. Первый, он вставляет svg код в сам HTML файл. А второй вариант более интересный, он вставляет base64 SVG код картинки в css файл. Можно сделать отдельный css файл и туда добавлять код со всех svg иконок, логотипа, и тп, это удобно и классно. В примере сайта http://www.jekyllnow.com/ как раз так и сделано, код всех svg картинок прописан в отдельном css файле, и потом вы нужную картинку легко выводите в HTML.

Сайт для конвертирования (Base64 encoder):
mobilefish.com/services/base64/base64.php

Еще один урок на английском про svg тут:
css-tricks.com/lodge/svg/09-svg-data-uris/

SVG

SVG

Как правильно сохранить SVG, так, чтобы использование векторного изображения на сайте оправдывало себя не только с эстетической стороны, но и было практичным, в отношении веса изображения?

В чем работать с векторной графикой?

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

Подробонее про графические пакеты и js-библиотеки:

  • Top 15 Free SVG Tools for Graphic & Web Designers
  • MDN: Tools for SVG

Чем симпатичен SVG?

При целевом использовании SVG позволяет:

  • минимизировать размер файла с изображением логотипа / иконки / иллюстрации;
  • разместить элемент, который при соблюдении пропорций сторон, не чувствителен к размеру отображения
  • применить к фрагментам различные стили средствами CSS (цвет, градиент и прочее)
  • добавить интерактива и анимации за счет применения возможностей CSS и JS

Примером может являться цикл разрабатываемых нами интерактивных заставок для веб-ресурсов ежегодного фестиваля Solar Systo Togathering:

  • 2015.solarsysto.ru
  • 2016.solarsysto.ru
  • 2017.solarsysto. ru

Итак, у нас есть некий векторный файл в AI

Рассмотрим частный и особо частый случай сохранения из Adobe Illustrator.

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

Обо всём по порядку:

1. Открываем файл

Открывем файл в Adobe Illustrator:

Насколько мы видим у него есть лишние белые поля по всем сторонам. Так что первым делом мы:

2. Убираем лишние поля

3. Оптимизируем вектор в иллюстраторе

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

Было:

Стало:

4. Сохраняем: File / Save As

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

5. Знакомимся с диалоговым окном сохранения

  • SVG Profiles
    По умолчанию используется SVG 1.1
  • Fonts
    Type / Convert to outlines — что означает «перевести в кривые», то, что нам и нужно, при этом селект Subsetting становится недоступным для изменения.
    Type / SVG — Нужен в случае, если в SVG встраивается текст
    Type / Subsetting — Позволяет указать включаемый набор символов с целью дальнейшей возможности редактирования текста в режиме исходного кода и представления его графически при отображении SVG файла.
  • Options
    Image Location / Embed — при наличии растровых изображений позволит включить их в состав SVG файла
    Image Location / Link — при наличии растровых изображений положит их рядом с файлом в той же папке, указав в SVG файле ссылку на них. Если в данном случае убрать изображение включаемое, то SVG файл перестанет корректно отображаться.
    Preserve Illustrator Capabilities — галочка, предполагающая последующую возможность редактирования файла в иллюстраторе
  • More options
    Трогать для решения наших задач необязательно.
  • SVG Code
    Замечательная кнопка, позволяющая просмотреть SVG файл в текстовом формате сразу.

При выбранном Image Location / Embed:

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

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

Пример, с 666 строки идет растровая дичь, абсолютное зло в нашем случае:

При выбранном Image Location / Link:

В коде будет менее заметная вставка, например:

Поэтому желательно просматривать именно в режиме Image Location / Embed!

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

6. Иконка планеты

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

7. На выходе получаем SVG или SVGZ файл

Формат: Без оптимизации векторной формы в иллюстраторе * С учетом оптимизации векторной формы в иллюстраторе *
SVG 36 813 bytes 35 941 bytes
SVGZ 15 310 bytes 15 214 bytes

* Пункт 3 перечня выше: Как оптимизировать сам вектор в иллюстраторе?

Вроде бы разница не велика, но это еще не конец процедуры.

Дальнейшие действия по оптимизации файла

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

Пример:


Что это такое и как его создать

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

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

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

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

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

Что такое файл SVG?

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

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

Возникает вопрос: что такое векторная графика?

Растр против вектора

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

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

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

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

Как работают файлы SVG

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

Давайте рассмотрим несколько примеров. Я начну с рисования простого круга в формате SVG:

Когда я открою файл этого круга в текстовом редакторе, появится такой XML-код:

Как видите, здесь не так много кода. Нам нужна только одна строка кода, чтобы нарисовать круг. Это потому, что XML делает за нас большую часть работы с теги . В приведенном выше коде теги показаны розовым цветом в угловых скобках.

Чтобы нарисовать круг, код XML указывает форму с помощью тега , ее положение с помощью атрибутов и cx и cy , радиус с помощью атрибута r и цвет внутри тега