Как вставлять svg в html

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

SVG — формат векторной графики. Буквально его название значит «масштабируемая векторная графика» (Scalable Vector Graphics). Попросту говоря, это то, с чем вы работаете в Adobe Illustrator. SVG можно легко использовать в вебе, но сперва нужно во многом разобраться.

Зачем вообще нужен SVG?

• Небольшие размеры файлов, отличное сжатие;
• Масштабирование до любого размера, без потери качества (разве что, при совсем маленьких размерах);
• Хорошо выглядит на ретине;
• Широкие возможности, которые предоставляют фильтры и интерактивность.

Создадим изображение SVG, с которым будем работать дальше

Создайте произвольный рисунок в Adobe Illustrator. Вот, например, птица киви на овале.

Обратите внимание, что изображение кадрируется чётко по краям изображения. Холст в SVG играет не меньшую роль, чем в PNG или JPG.

Adobe Illustrator умеет сохранять в SVG.

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

Здесь стоит отметить, что у вас есть возможность нажать OK и сохранить файл или же нажать кнопку “SVG Code…”, которая откроет окно TextEdit (по крайней мере на Mac) с SVG-кодом.

Оба варианта могут пригодиться.

Добавляем SVG на страницу с помощью тега <img>

Если сохранить изображение SVG в файл, то его можно вставить с помощью тега <img> .

В Illustrator рабочая область была размером 612px ✕ 502px.

Именно такие размеры будут у изображения на странице, если их не указать специально. Его размеры можно изменить, задав атрибуты width или height для img , так же как для PNG или JPG. Вот пример:

Поддержка браузерами

SVG по-разному поддерживается браузерами. Он работает везде, кроме IE до 8 версии и браузерах на Android до версии 2.3.

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

Один из вариантов: проверка поддержки через Modernizr и замена src для изображения:

Дэвид Бушел (David Bushell) предложил очень простой альтернативный вариант, если вы не имеете ничего против JavaScript в разметке:

Еще можно использовать SVGeezy. Далее мы рассмотрим другие способы деградации.

Добавляем SVG через background-image

Использовать SVG в качестве фона c помощью CSS-свойства background-image так же просто, как и вставка с помощью тега img .

Обратите внимание, что для селектора .logo задан размер background-size . Это необходимо, иначе будет видна только верхняя левая часть изображения SVG, у которого исходный размер намного больше. Эти размеры прописаны с учётом соотношения сторон изображения в оригинале. Можно также использовать для background-size значение contain , чтобы убедиться в том, что изображение поместится в родительский контейнер, если вам не известно какого размера оно должно быть.

Поддержка браузерами

Вставка SVG через свойство background-image по-разному поддерживается браузерами, но в общем дела обстоят так же, как и с img . Проблемой являются IE до 8 версии и браузеры на Android до версии 2.3.

В этом случае нам может помочь Modernizr, даже более эффективно, чем при использовании img . Если заменить background-image на изображение, формат которого поддерживается, на сервер будет отправлен один HTTP-запрос, а не два. Modernizr добавляет класс “no-svg” для html-элемента, если SVG не поддерживается:

Общая проблема при использовании <img> и background-image …

Проблема состоит в том, что вы не можете управлять внутренностями SVG с помощью CSS так, как сможете при использовании двух приёмов описанных ниже. Читайте дальше!

Добавляем SVG непосредственно в документ

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

Этот приём может быть полезным, так как изображение встроено прямо в документ, и для его загрузки не происходит дополнительный HTTP-запрос. У этого метода те же преимущества, как и у использования Data URI. И недостатки у него те же, не обольщайтесь. Среди них: вероятность получения очень тяжелого документа, наличие блоков SVG-кода в нем и невозможность кэширования.

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

Сначала оптимизируем

Без сомнений, для вас не станет сюрпризом то, что SVG, полученные в Adobe Illustrator, не самые оптимальные. Они содержат DOCTYPE, примечания генератора и прочий мусор. У SVG, в общем, и так небольшой размер, но почему бы не уменьшить его еще больше, если есть возможность? Питер Коллингридж (Peter Collingridge) создал SVG Optimiser, инструмент для онлайн-оптимизации SVG. Загружаете старый файл, скачиваете новый. В своём видео Кайл Фостер заходит ещё дальше и удаляет даже переносы строки в процессе оптимизации.

Если вы еще более суровы, вот вам инструмент на Node JS, с помощью которого можно оптимизировать изображения самостоятельно.

Затем управляем с помощью CSS

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

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

Более того, в SVG можно использовать фильтры, например размытие:

И его можно применить из CSS:

Пример того, что может получиться:

Поддержка браузерами

Добавление SVG непосредственно в документ по-разному поддерживается браузерами, однако все сводится к отсутствию поддержки IE младше 8 и браузерам на Android до версии 2.3 1.

Для этого способа вставки SVG можно использовать следующие приемы деградации:

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

Добавляем SVG на страницу с помощью тега <object>

Если по какой-либо причине вариант со вставкой SVG непосредственно в документ вам не нравится (он все же имеет парочку недостатков, например, кэширование практически невозможно), можно подключить SVG-файл используя <object> и сохранить возможность управлять его частями посредством CSS.

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

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

Внешние файлы со стилями для SVG, вставленного с помощью <object>

Есть способ добавить в SVG-файл внешний файл со стилями, если это необходимо работы для проекта, кэширования или еще чего-то. Я экспериментально выяснил, что он работает только для SVG-файлов, встроенных в документ с помощью тега <object> . Вот что нужно добавить в SVG-файл перед открывающим тегом <svg> :

Если попробовать добавить этот код в HTML, вы получите ошибку, и браузер даже не подумает его подгружать. Если подключить SVG-файл, в котором предложенный код заменяет <img> или background-image , система ругаться не будет, но и работать такой код не будет (SVG, однако, отобразится).

Использование Data URI для SVG

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

Его можно использовать в любом из приёмов, которые мы рассмотрели (кроме вставки <svg> непосредственно в документ, поскольку это попросту нелогично). Просто скопируйте всю полученную тарабарщину вместо [data] в следующих примерах.

Добавление на страницу с использованием тега <img>

Добавление на страницу в качестве фона с использованием CSS

Добавление на страницу с использованием тега <object>

Кстати, если добавить <style> в SVG до кодирования в base64, он будет работать при добавлении на страницу с использованием тега <object> ! А для по-настоящему суровых разработчиков компания Filament group предлагает инструмент grunticon, который автоматизирует этот процесс.

Консольные штучки для перекодирования SVG в base64:

@chriscoyier @hkfoster maybe you could take a shortcut with >>> echo -n `cat logo.svg` | base64 | pbcopy

— Benny Schudel (@bennyschudel) March 2, 2013

Используйте openssl base64 < path/to/file.png | tr -d ‘\n’ | pbcopy или cat path/to/file.png | openssl base64 | tr -d ‘\n’ | pbcopy чтобы пропустить запись в файл и просто скопировать выходные данные в кодировке base64 в буфер без переносов строки.

Материалы для дальнейшего чтения

• Дэвид Бушел: Букварь фронтендера по SVG-хакерству
• Дэвид Бушел: Независимость от разрешения с SVG
• Поддержка браузеров для всяких всячин повязанных с SVG.
• Питер Гестон (Peter Gasston): Создание лучших SVG-спрайтов при помощи анкерных идентификаторов
• simuari: SVG стеки — «Упрощённая библиотека для манипуляции и анимации SVG»
• В Emmet есть отличный способ генерировать data URI для SVG прямо в редакторе кода
• В Compass также есть вспомогательное средство для data URI
• Adobe: Стилизация SVG
• Эндрю Дж. Бейкер (Andrew J. Baker): Приручаем зверя SVG
• Альтернатива Illustrator: Inkscape, Sketch
• Кристер Кари (Krister Kari): Использование SVG-изображений для мобильных браузеров

Нельзя не упомянуть видео Кайла Фостера «Последовательность оптимизации SVG»:

Примечания

1. Говоря о браузере Android 2.3, вот. Но если вам никак не обойтись без поддержки родного браузера, вот.

HTML5 — SVG

SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.

SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc.

SVG became a W3C Recommendation 14. January 2003 and you can check latest version of SVG specification at SVG Specification.

Viewing SVG Files

Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. Internet Explorer users may have to install the Adobe SVG Viewer to be able to view SVG in the browser.

Embedding SVG in HTML5

HTML5 allows embedding SVG directly using <svg>. </svg> tag which has following simple syntax −

Firefox 3.7 has also introduced a configuration option («about:config») where you can enable HTML5 using the following steps −

Type about:config in your Firefox address bar.

Click the «I’ll be careful, I promise!» button on the warning message that appears (and make sure you adhere to it!).

Type html5.enable into the filter bar at the top of the page.

Currently it would be disabled, so click it to toggle the value to true.

Now your Firefox HTML5 parser should be enabled and you should be able to experiment with the following examples.

HTML5 − SVG Circle

Following is the HTML5 version of an SVG example which would draw a circle using <circle> tag −

This would produce the following result in HTML5 enabled latest version of Firefox.

HTML5 − SVG Rectangle

Following is the HTML5 version of an SVG example which would draw a rectangle using <rect> tag −

This would produce the following result in HTML5 enabled latest version of Firefox.

HTML5 − SVG Line

Following is the HTML5 version of an SVG example which would draw a line using <line> tag −

You can use the style attribute which allows you to set additional style information like stroke and fill colors, width of the stroke, etc.

This would produce the following result in HTML5 enabled latest version of Firefox.

HTML5 − SVG Ellipse

Following is the HTML5 version of an SVG example which would draw an ellipse using <ellipse> tag −

This would produce the following result in HTML5 enabled latest version of Firefox.

HTML5 − SVG Polygon

Following is the HTML5 version of an SVG example which would draw a polygon using <polygon> tag −

This would produce the following result in HTML5 enabled latest version of Firefox.

HTML5 − SVG Polyline

Following is the HTML5 version of an SVG example which would draw a polyline using <polyline> tag −

This would produce the following result in HTML5 enabled latest version of Firefox.

HTML5 − SVG Gradients

Following is the HTML5 version of an SVG example which would draw an ellipse using <ellipse> tag and would use <radialGradient> tag to define an SVG radial gradient.

Similarly, you can use <linearGradient> tag to create SVG linear gradient.

This would produce the following result in HTML5 enabled latest version of Firefox.

HTML5 − SVG Star

Following is the HTML5 version of an SVG example which would draw a star using <polygon> tag.

This would produce the following result in HTML5 enabled latest version of Firefox.

SVG in HTML

You can embed SVG elements directly into your HTML pages.

Embed SVG Directly Into HTML Pages

Here is an example of a simple SVG graphic:

Sorry, your browser does not support inline SVG.

and here is the HTML code:

Example

SVG Code explanation:

• An SVG image begins with an <svg> element
• The width and height attributes of the <svg> element define the width and height of the SVG image
• The <circle> element is used to draw a circle
• The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are not set, the circle’s center is set to (0, 0)
• The r attribute defines the radius of the circle
• The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 4px green "border"
• The fill attribute refers to the color inside the circle. We set the fill color to yellow
• The closing </svg> tag closes the SVG image

Note: Since SVG is written in XML, all elements must be properly closed!

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Как использовать изображения SVG в CSS и HTML — Учебное пособие для начинающих

SVG — это масштабируемая векторная графика ( Scalable Vector Graphics). Это уникальный тип формата изображения для векторной графики, написанный на Extensible Markup Language (XML).

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

Почему вам следует использовать изображения SVG?

Есть ряд причин почему стоит использовать изображения SVG, например:

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

Теперь давайте посмотрим, как на самом деле можно работать с изображениями SVG.

Как использовать изображения SVG в CSS и HTML

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

1. Как использовать SVG в качестве

Этот метод — самый простой способ добавить изображения SVG на страницу. Чтобы использовать этот метод, добавьте элемент в HTML-документ и укажите путь к изображению в атрибуте src, например:

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

Например, в приведенноv выше примере мы не изменяли размер SVG, поэтому он принял исходный размер (ширина 600,53015 пикселей и высота 915,11162 пикселей).

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

2. Как использовать SVG в качестве фонового изображения CSS

Это похоже на добавление SVG в документ HTML с помощью тега . Но на этот раз мы делаем это с помощью CSS, а не HTML, как в следующем примере.

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

Посмотрите код ниже и можете попробовать внести свои изменения с помощью CSS.

3. Как использовать SVG как inline изображения

Изображения SVG можно поместить прямо в документ HTML с помощью тега .

Использование этого метода позволяет выполнять больше настроек, в отличие от методов <img> или background-image.

4.Как использовать SVG как <Object>

Вы также можете использовать элемент HTML <object> для добавления изображений SVG на веб-страницу, используя синтаксис как в примере ниже:

Атрибут data используется для указания URL-адреса ресурса, который будет использоваться объектом, которым в нашем случае является изображение SVG.

Используйте ширину и высоту, чтобы задать размер SVG изображения

Использование <object> поддерживается всеми браузерами, поддерживающими SVG.

5. Как использовать SVG в качестве <iframe>

Несмотря на то, что такой подход не рекомендуется, вы также можете добавить изображение SVG с помощью <iframe>, как показано ниже:

Однако имейте в виду, что <iframe> может быть сложно поддерживать, и это плохо скажется на поисковой оптимизации (SEO) вашего сайта.

Использование <iframe> также противоречит цели Scalable в названии Scalable Vector Graphics, поскольку изображения SVG, добавленные в этом формате, не масштабируются.

6. Как использовать SVG как <embed>

Элемент HTML <embed> — это еще один способ использования изображения SVG в HTML и CSS с использованием этого синтаксиса: <embed src = "happy.svg" />.

Однако имейте в виду, что у этого метода тоже есть ограничения. Согласно MDN, большинство современных браузеров запретили и удалили поддержку надстроек браузера (требуется для тега <embed>). Это означает, что полагаться на <embed>, как правило, неразумно, если вы хотите, чтобы ваш сайт работал в браузере обычного пользователя.

Заключение

Надеюсь, вы смогли узнать о различных способах использования изображений SVG в CSS и HTML. Мы надеемся, что это поможет вам выбрать правильный метод при добавлении изображений SVG на сайт.