Как использовать изображения 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, например:

<img src = "it-junior.svg"/>

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

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

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

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

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

body {
  background-image: url(happy.svg);
}

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

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

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

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

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

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

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

<object data="happy.svg" width="300" height="300"> </object>

Атрибут 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 на сайт.