Въведение в HTML SVG
Използването на изображения в HTML е страхотно за уебсайтове, богати на мултимедия. Всичко, което трябва да направите, е да добавите маркер към HTML кода и виолата, браузърът ви ще покаже и дори добави връзка към изображението по ваш избор. Става малко притеснително в ситуации, в които знаете, че изображението или диаграмата ще бъдат увеличени, тъй като JPG.webp или PNG няма да показват повече подробности, след като бъдат увеличени в миналото си. SVG е решението на този проблем. SVG означава Скалируема векторна графика. Както подсказва името, те могат да бъдат увеличени до колкото е необходимо и детайлите никога не изчезват. SVG не са изключителни за уеб технологиите, но да можеш да ги използваш в HTML е наистина красиво.
SVG е полезен за диаграми, вектори, диаграми и графики в браузъра. Нека научим как можете да ги използвате подробно тук.
Синтаксис на вграждане на SVG в HTML
Подобно на използването на платно в 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
Можем да използваме маркера, за да нарисуваме права линия в SVGs HTML5, също може да бъде определен цвят, дебелина на линията и позицията му.
Код:
изход:
Пример №5 - Рисуване на затъмнение чрез SVG в HTML5
Можем да използваме маркера, за да нарисуваме затъмнение в HTML5 SVGs, цветът и позицията му могат да бъдат определени заедно с матрицата с нейния радиус.
Код:
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 тага, за да обозначи използването му. Нека да разгледаме един пример, който използва Gradient в затъмнение.
Код:
Sorry but this browser does not support inline SVG.
изход:
заключение
В случай на сайтове, където се използват диаграми и диаграми, SVGs са спасител. Повечето съвременни уеб браузъри също поддържат SVG и освен че са мащабируеми. Друго предимство на използването на SVG е неговият размер на файла. Тъй като това е само малко код, SVG файловете могат да имат много малък отпечатък в паметта и честотната лента, консумирани в сравнение с традиционните изображения.
Препоръчителни статии
Това е ръководство за HTML SVG. Тук обсъждаме въвеждането и топ 10 примера на HTML SVG с обяснение и изпълнение на кода. Можете също да разгледате следните статии, за да научите повече -
- Html5 Нови елементи
- SVG срещу EPS
- HTML блокове
- HTML рамки