Однажды, бороздя просторы интернета, я наткнулся на изображение SVG. Я и раньше встречал этот формат, однако, не обращал внимания, считая, что это очередной новый формат, разработанный под какой-нибудь новый графический редактор. Однако, все оказалось гораздо интересней. SVG расшифровывается, как масштабируемая векторная графика. Это изображение в формате XML, то есть, его можно открыть в любом текстовом редакторе и в нём же менять (перерисовывать). Вообще, я бы не стал называть SVG изображением, это скорее язык разметки, который современными браузерами и SVG вьюерами преобразуется в изображение.
Преимущества SVG:
1. Достаточно маленький размер файла.
2. Масштабируемость. То есть при изменении размера изображения оно не меняет своего качества.
3. Открытость формата. Возможность редактирования даже в текстовом редакторе.
С появлением поиска SVG в Google пропала проблема индексации SVG.
Самым большим недостатком SVG является то, что старые браузеры не понимают этот формат. Для просмотра в старых браузерах необходимо устанавливать плагин. К тому же, по-моему, невозможно изменить формат привычных бинарных изображений в настоящий SVG, возможно лишь внедрение таких изображений внутрь SVG.
Для создания SVG необходимо знать, как показать браузеру, что это именно SVG, а также теги и их атрибуты, которые и будут указывать браузеру или просмотрщику то, что надо прорисовать.
Первая строчка SVG файла – это всегда
<?xml version="1.0" standalone="no"?>
Затем можно указать DTD. Но это не обязательно.
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Затем идет тег svg.
<svg xmlns=http://www.w3.org/2000/svg
xmlns:xlink="http://www.w3.org/1999/xlink">
Атрибуты тега svg:
Выше мною были описаны обязательные теги. Ниже речь пойдет о тегах, которые непосредственно создают изображение.
Line – этот элемент определяет отрезок с началом в одной точке и концом в другой.
Атрибуты line:
Использование line:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="400 xmlns="http://www.w3.org/2000/svg"
version="1.1">
<desc>Example line01 - lines expressed in user coordinates</desc>
<line x1="100" y1="300" x2="300" y2="100" stroke-width="5" />
</svg>
Без указания значения атрибута stroke-width, который определяет толщину линии, линия не видна.
Rect – этот элемент определяет прямоугольник. Прямоугольник со скругленными углами определяется значениями атрибутов rx и ry.
Атрибуты rect:
Ипользование rect:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="<a href="http://www.w3.org/2000/svg">
http://www.w3.org/2000/svg</a>" version="1.1">
<desc>Example rect01 - rectangle with sharp corners</desc>
<!-- Show outline of canvas using rect element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>
<rect x="400" y="100" width="400" height="200"
fill="yellow" stroke="navy" stroke-width="10" />
</svg>
Circle – определяет круг с указанием координат центра и радиуса.
атрибуты circle:
Использование circle:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example circle01 - circle filled with red and
stroked with blue</desc>
<!-- Show outline of canvas using rect element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>
<circle cx="600" cy="200" r="100"
fill="red" stroke="blue" stroke-width="10" />
</svg>
Ellipse – определяет овал, у которого указан центр и два радиуса.
атрибуты elipse:
Использование ellipse:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example ellipse01 - examples of ellipses</desc>
<!-- Show outline of canvas using rect element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<g transform="translate(300 200)">
<ellipse rx="250" ry="100"
fill="red" />
</g>
<ellipse transform="translate(900 200) rotate(-30)"
rx="250" ry="100"
fill="none" stroke="blue" stroke-width="20" />
</svg>
Poliline – это элемент, определяющий несколько соединенных прямых отрезков.
Атрибуты poliline:
Использование poliline:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example polyline01 - increasingly larger bars</desc>
<!-- Show outline of canvas using rect element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<polyline fill="none" stroke="blue" stroke-width="10"
points="50,375
150,375 150,325 250,325 250,375
350,375 350,250 450,250 450,375
550,375 550,175 650,175 650,375
750,375 750,100 850,100 850,375
950,375 950,25 1050,25 1050,375
1150,375" />
</svg>
Polygon – это элемент определяющий замкнутую фигуру, состоящую из соединенных прямых линий.
Атрибуты polygon:
Использование polygon:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example polygon01 - star and hexagon</desc>
<!-- Show outline of canvas using rect element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2" />
<polygon fill="red" stroke="blue" stroke-width="10"
points="350,75 379,161 469,161 397,215
423,301 350,250 277,301 303,215
231,161 321,161" />
<polygon fill="lime" stroke="blue" stroke-width="10"
points="850,75 958,137.5 958,262.5
850,325 742,262.6 742,137.5" />
</svg>
В этой статье описаны самые простые фигуры, которые могут быть созданы средствами SVG. Существуют и более сложные, например, path, а также можно объединять простые объекты в группы посредством элемента g. Кроме того в этой статье не описано большое количество атрибутов, которые можно применить почти ко всем элементам и, которые позволяют настраивать внешний вид элементов SVG.
We decided to use an Azure App Configuration to store configs of backend. App Configuration…
I have encountered an issue with az acr login --name <acr_name> command. It hanged and…
I have tried to learn terraform from scratch and found pretty simple tutorial for beginners.…
При внедрении Swagger в проекте .Net Core Web API потребовалось скрыть одно поле из примера,…
Около года назад я решил попробовать заработать на фондовой бирже, покупая и продавая акции. Изучая…
Во время установки .NET Framework столкнулся с ошибкой Installation failed with error code: (0x00000490), "Element…