HTML | SVG-основы
Опубликовано: 1 Марта, 2022
Что такое SVG?
- SVG - это масштабируемая векторная графика.
- Он в основном определяет векторную графику в формате XML.
- Графика SVG НЕ теряет качества при увеличении или изменении размера.
- Каждый элемент и каждый атрибут в файлах SVG можно анимировать.
В чем преимущества SVG?
Преимущества использования SVG перед другими форматами изображений (такими как JPEG и GIF):
- Изображения SVG можно создавать и редактировать с помощью любого текстового редактора.
- Изображения SVG можно искать, индексировать, создавать сценарии и сжимать.
- Изображения SVG масштабируемы.
- Изображения SVG можно распечатать с высоким качеством при любом разрешении.
Различия между HTML SVG и HTML Canvas
- SVG - это язык для описания 2D-графики в XML, тогда как Canvas рисует 2D-графику на лету с помощью JavaScript.
- Если атрибуты объекта SVG изменяются, браузер может автоматически повторно визуализировать форму, тогда как Canvas визуализируется пиксель за пикселем. На холсте, после того, как изображение нарисовано, оно забывается браузером.
- SVG не зависит от разрешения, тогда как CANVAS зависит от разрешения.
- SVG поддерживает обработчики событий, тогда как CANVAS не поддерживает обработчики событий.
Рисование круга SVG в HTML
Пример:
ВЫХОД : 
Рисование прямоугольника SVG в HTML
INPUT :
<!DOCTYPE html><html><body> <svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /></svg> </body></html> |
ВЫХОД : 
Рисование закругленного прямоугольника SVG в HTML
Example :
<!DOCTYPE html><html><body> <svg width="400" height="380"> <rect x="80" y="20" rx="20" ry="20" width="150" height="150" style="fill:orange;stroke:black;stroke-width:2;opacity:0.5" /></svg> </body></html> |
ВЫХОД : 
Drawing A SVG Star in HTML
Example:
<!DOCTYPE html><html><body> <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:grey;stroke:orange;stroke-width:5;fill-rule:evenodd;" /></svg> </body></html> |
ВЫХОД : 
Рисование логотипа в HTML с использованием SVG
Example:
<!DOCTYPE html><html><body> <svg height="300" width="700"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:white;stop-opacity:1" /> <stop offset="100%" style="stop-color:green;stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="200" cy="100" rx="120" ry="80" fill="url(#grad1)" /> <text fill="#ffffff" font-size="22" font-family="ARIAL" x="120" y="110">GeeksForGeeks</text></svg> </body></html> |
ВЫХОД : 
Поддерживаемый браузер: поддерживаемые браузеры перечислены ниже.
- Google Chrome 4.0
- Internet Explorer 9.0
- Firefox 3.0
- Opera 10.1
- Safari 3.2