HTML SVG
HTML SVG — это аббревиатура, обозначающая масштабируемую векторную графику.
HTML SVG — это модульный язык, который используется для описания графики в XML. Он описывает двумерную векторную и смешанную векторно-растровую графику в формате XML. Это рекомендация W3C. Изображения SVG и их поведение определяются в текстовых файлах XML. Таким образом, в виде XML-файлов вы можете создавать и редактировать изображения SVG с помощью текстового редактора, но обычно для их создания предпочтительнее использовать программы для рисования, такие как inkspace.
SVG в основном используется для диаграмм векторного типа, таких как круговые диаграммы, двумерные графики в системе координат X, Y и т. д.
Элемент <svg> указывает корень фрагмента SVG. Вы можете анимировать каждый элемент и каждый атрибут в файлах SVG.
Пример круга HTML SVG
Давайте посмотрим на пример рисования круга с помощью тега svg.
<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
</svg>
Пример прямоугольника HTML SVG
Давайте посмотрим на пример рисования прямоугольника с помощью тега svg.
<rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red" />
</svg>
Пример многоугольника HTML SVG
Давайте посмотрим на пример рисования многоугольника с помощью тега svg.
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:red;stroke:yellow;stroke-width:5;fill-rule:nonzero;" />
</svg>
Почему SVG предпочтительнее других форматов изображений?
Изображения SVG можно сохранять в наименьшем возможном размере. В отличие от форматов растровых изображений, таких как JPG или PNG, он не содержит фиксированного набора точек. Таким образом, также легко печатать с высоким качеством при любом разрешении.
Изображения SVG можно масштабировать до определенного уровня без ухудшения качества изображения.
Изображения SVG и их поведение определяются в текстовых файлах XML, поэтому их можно создавать и редактировать в любом текстовом редакторе.
