
Как использовать изображения 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 на сайт.
Оставить комментарий
Комментарии могут оставлять только зарегистрированные пользователи