Введение в HTML SVG
Использование изображений в HTML отлично подходит для мультимедийных сайтов. Все, что вам нужно сделать, это добавить тег в HTML-код и альт, ваш браузер отобразит и даже добавит ссылку на изображение по вашему выбору. Это немного беспокоит в ситуациях, когда вы знаете, что изображение или диаграмма будут увеличены, потому что JPG.webp или PNG не будут отображать какие-либо дополнительные детали, когда они будут увеличены в разрешении. SVG является решением этой проблемы. SVG расшифровывается как Scalable Vector Graphics. Как следует из названия, их можно увеличивать столько раз, сколько необходимо, и детали никогда не исчезают. SVG не являются исключительными для веб-технологий, но возможность использовать их в HTML очень удобна.
SVG полезен для диаграмм, векторов, диаграмм и графиков в браузере. Давайте узнаем о том, как вы можете использовать их подробно здесь.
Синтаксис встраивания SVG в HTML
Аналогично использованию canvas в HTML5, существует простой тег, который можно использовать для встраивания SVG в страницы HTML5. Синтаксис следующий:
…. …. …. ….
Примеры SVG в HTML
Теперь давайте посмотрим на некоторые примеры векторов, которые могут быть созданы и встроены в HTML5:
Пример № 1 - Рисование прямоугольника с помощью SVG в HTML
Код:
Sorry but this browser does not support inline SVG.
Выход:
Пример № 2 - Рисование квадрата с закругленными углами в SVG
Для квадрата с закругленными углами мы должны определить радиус углов с помощью rx, ry, кроме размера и размеров квадрата.
Код:
Sorry but this browser does not support inline SVG.
Выход:
Пример № 3 - Рисование круга в SVG с контуром и цветной подачей внутри него
Код:
Sorry but this browser does not support inline SVG.
Выход:
Пример № 4 - Рисование прямой линии с помощью SVG в HTML5
Мы можем использовать тег для рисования прямой линии в HTML5 SVG, цвет, толщина линии и ее положение также могут быть определены.
Код:
Выход:
Пример № 5 - Рисование затмения с помощью SVG в HTML5
Мы можем использовать тэг для рисования затмения в HTML5 SVG, его цвет и положение могут быть определены вместе с его радиусом.
Код:
Sorry but this browser does not support inline SVG.
Выход:
Пример # 6 - Создание многоугольника с SVG в HTML5
Тег можно использовать в SVG для создания полигонов. В теге мы должны упомянуть позиции каждой точки. Цвета заливки, толщина контура и т. Д. Также могут быть определены в коде.
Код:
Sorry but this browser does not support inline SVG.
Выход:
Пример # 7 - Создание полилинии с SVG в HTML5
Полилиния используется для рисования фигуры, которая будет состоять только из прямой линии. Имейте в виду, что эти линии тоже должны быть связаны. Вот пример реализации полилинии в HTML5.
Код:
Sorry but this browser does not support inline SVG.
Выход:
Пример №8 - Рисование текста с помощью SVG в HTML5
Текст может быть необходим в любом SVG во многих ситуациях, таких как маркировка диаграммы и т. Д. К счастью, в SVG есть тег, который можно использовать. Текст может быть установлен в любом месте в SVG, вы также можете настроить его цвет и другие детали.
Код:
Here is an example, it's very examply
Sorry but this browser does not support inline SVG.
Выход:
Пример № 9 - Рисование звезды с SVG в HTML5
Теперь, когда мы закончили с основами, давайте создадим звезду, которая будет создана с помощью SVG.
Код:
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
style="fill:orange; stroke:green; stroke-width:5; fill-rule:evenodd;" />
Sorry but this browser does not support inline SVG.
Выход:
Пример №10 - Использование линейного градиента в SVG
Вы можете использовать линейный и радиальный градиент в SVG многострочном HTML Canvas. Градиент должен быть вложен в тег. Этот тег затем помечается в теге SVG для обозначения его использования. Давайте посмотрим на пример, который использует градиент в затмении.
Код:
Sorry but this browser does not support inline SVG.
Выход:
Вывод
В случае сайтов, где должны использоваться диаграммы и диаграммы, SVG - спасение жизни. Большинство современных веб-браузеров также поддерживают SVG и не только масштабируемы. Еще одним преимуществом использования SVG является его размер файла. Поскольку это всего лишь небольшой фрагмент кода, SVG может занимать очень мало места в памяти и потребляемой полосе пропускания по сравнению с традиционными изображениями.
Рекомендуемые статьи
Это руководство по HTML SVG. Здесь мы обсуждаем введение и 10 лучших примеров HTML SVG с объяснением и реализацией кода. Вы также можете посмотреть следующие статьи, чтобы узнать больше -
- HTML5 Новые элементы
- SVG против EPS
- HTML блоки
- HTML-фреймы