SVG

SVG — это формат векторной графики. В отличие от растровой графики — PNG, GIF, JPEG — SVG может растягиваться и сжиматься без потери качества, то есть такие картинки будут одинаково чёткими и на обычных экранах, и на ретине. Ещё одно из достоинств SVG — человекопонятный код: его можно не только прочитать, но и написать руками. Также SVG-элементы можно оформить с помощью CSS и добавить им интерактивности с помощью JavaScript, а кроме того, SVG поддерживается всеми современными браузерами.

SVG-элемент вставляется с помощью тега svg, внутри которого уже находится остальное содержимое: фигуры, картинки или текст.

Пример отображает зеленый круг и прямоугольник:

В SVG есть несколько способов нарисовать фигуру, для простых фигур есть свои теги: прямоугольник rect (Атрибуты width и height управляют, соответственно, шириной и высотой фигуры. Значения можно задавать и в пикселях, и в процентах. Чтобы задать координаты прямоугольника, используются атрибуты x и y. Скруглением углов прямоугольника управляют параметры rx и ry. Атрибут rx задаёт скругление по горизонтали, а ry — по вертикали. Если атрибут ry не задан, он будет равен rx.). Окружность рисуется с помощью тега circle ( В отличие от предыдущих фигур, положение окружности в пространстве определяется координатами центра фигуры: атрибут cx задаёт положение по горизонтальной оси, cy — по вертикальной. По умолчанию координаты центра окружности равны 0,0, поэтому она находится в верхнем левом углу. ). Эллипс ellipse рисуется почти так же, как круг (но у него два радиуса: по горизонтальной оси — rx, и по вертикальной — ry); Линии рисуются с помощью тега line. Координаты начала линии задаются атрибутами x1 и y1, координаты конца — атрибутами x2 и y2 (Координаты можно задавать в процентах Так как линия не образует фигуру с внутренним контуром, для отображения ей нужно задать не заливку, а обводку. Обводкой управляют два атрибута: stroke и stroke-width. Атрибут stroke задаёт цвет обводки, stroke-width — толщину линии). Ломаные линии рисуются с помощью тега polyline (Координаты точек на линии задаются в атрибуте points, как для polygon. Разница между polygon и polyline заключается в поведении обводки: у многоугольника обводка замыкается сама по себе, а у ломаной линии — остаётся незамкнутой).

Для значений в пикселях после значения не нужно писать px, потому что пиксели — единица измерения, используемая в SVG по умолчанию. Проценты рассчитываются относительно размеров всего SVG-изображения: горизонтальные значения относительно ширины, вертикальные — относительно высоты. В современных браузерах размерами и положением фигур нельзя управлять через CSS, но эта возможность появится в будущем.

Обратите внимание: все теги в SVG должны быть закрыты,  например, <rect/> или <rect></rect>.

В SVG можно рисовать не только четырёхугольники, но и многоугольники, это делается с помощью тега polygon. В атрибуте points задаются координаты вершин фигуры. Каждая координата задаётся по x и y. Координаты в points нельзя задавать в процентах. Пример звезды: <polygon points="70,5 90,41 136,48 103,80 111,126 70,105 29,126 36,80 5,48 48,41"/> .