logo

nixscript

Keep it simple, stupid !

Ссылка на статью в формате MarkDown для Curl, кодировка RU.UTF-8

SVG Простые фигуры

Адрес статьи: nixscript.ru/svg2

Формат SVG предусматривает несколько простых фигур. Использование фигур позволяет упростить код и сэкономить пространство занимаемое файлом. В заключении к этой статье, я приведу пример и вы поймёте о чём речь.

ВАЖНО: Координаты X ведут отсчёт слева, Y - сверху. Не снизу, а именно сверху.

Универсальные атрибуты

Любая фигура принимает универсальные атрибуты. Такие как цвет заливки, цвет обводки, толщина обводки... Даже свойства CSS могут быть использованы, если SVG встроен в HTML, в веб-страницу.

Сейчас я перечислю известные мне универсальные атрибуты и опишу типы значений.

Это три основных универсальных атрибута, которых мне пока хватает. Разумеется их больше.

Прямоугольник

Прямоугольник был описан мной в предыдущей статье. Фигура простая сама по себе, так же как и её код. Вот пример самого простого "квадрата Малевича".

<rect x="10" y="10" width="20" height="20" fill="#000" />

Как видно, здесь указаны начальные координаты квадрата x и y, ширина и высота. А так же чёрный цвет заливки. Можно скруглить углы, добавив атрибут rx или ry, указав значением радиус скругления.

<rect x="10" y="10" width="20" height="20" rx="3" fill="#000" />

Круг

В предыдущей статье я забыл указать эту фигуру. Круг является правильным кругом, имея одинаковое расстояние от центра к краю в любую сторону. код круга выглядит так:

<circle cx="30" cy="30" r="20" />

Атрибуты совершенно логичны. cx и cy - это координаты центра круга, а r - радиус. Данным кодом задан круг с центром 30 пикселей справа и сверху, с радиусом 20 пикселей (или диаметром 40 пикселей, если так понятнее).

Учитывая, что атрибут fill не указан, круг будет выведен чёрным, как и всегда, при отсутствии атрибутов цвета.

Эллипс

В отличие от круга, эллипс имеет неправильную окружность. Эллипс, это вытянутый круг. Соответственно ему нужно больше атрибутов. Но при этом, эллипс может быть идентичным кругу визуально, если понадобится.

Вот код:

<ellipse cx="250" cy="25" rx="100" ry="25"/>

И сразу видно, что в отличие от круга, вместо r используются rx и ry. Если указать rx и ry с одинаковым значением, то будет правильный круг. В данном примере, эллипс вытянут по горизонтали. Если же указать ry больше rx, эллипс вытянется по вертикали.

Линия

Просто прямая линия, без выпендрёжа. Из точки А в точку Б, не более.

<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>

Думаю логика уже понятна. x1 y1 - координаты точки А, x2 y2 - координаты точки Б.

Путь

Это сложный элемент. Его даже фигурой называть не верно, поскольку он может быть чем угодно. Может принять форму люой фигуры из тех, что я описал, а может имет вид самой невообразимой фигуры, с пустотами внутри себя или частями на расстоянии.

И поскольку двумя словами этот элемент не описать, я уделю ему целую статью. Это будет следующая статья.

Кто сверху?

Очерёдность элементов (фигур, объектов) в SVG имеет важное значение. Если мы изобразим (укажем код) трёх одинаковых квадратов, с абсолютно одинаковыми атрибутами координат и параметров, но с разным цветом заливки, мы увидим только тот квадрат, который в коде указали последним. Он будет в самом верху и перекроет остальные.

Если мы расположим квадраты каскадом, со смещением по XY на 5 пикселей, мы наглядно увидим, что первый квадрат будет в самом низу, второй посередине, а третий сверху. Это всегда надо учитывать. Если не соблюдать порядок, можно фоном перекрыть важную часть и не будет смысла в этом изображении.

BASH

Немного поразмыслив, вы легко сможете переделать пример из первой статьи под любую из описанных здесь фигур. Это не сложно. Так же можно сделать универсальный скрипт, чтобы он выдавал любую фигуру с заданными параметрами.

Здесь я не буду приводить пример скрипта, в этом нет практического смысла и интереса. Но если требуется изображение из простых фигур, думаю, вы уже поняли как это сделать.

Заключение

Как вы видите, любая из описаных фигур задаётся легко, имеет минимум атрибутов и занимает не много места. Не описанный здесь элемент путь, может занимать больше места в файле и имеет более сложные правила кода. В следующей статье вы в этом убедитесь. Здесь же, я приведу пример кода квадрата, заданного при помощи пути.

<path d="M10 10L30 10L30 30L10 30z" fill="#f00" />

Это всё тот же красный квадрат, но как видите, код его не понятен на первый взгляд. А для кого-то и на второй... третий...

Но не только в понятности кода проблема. Несколькими простыми фигурами, можно отобразить сложную фигуру и она будет занимать значительно меньше пространства в файле, чем если описывать её с помощью пути. В некоторых случаях, экономия места может составлять 70% и более, от исходного варианта с путём.

Именно поэтому, в первую очередь, во всех статьях о SVG, идёт описание простых фигур, а уже потом описан путь.

Автор: grigruss 27.10.2019

Статья написана в формате MarkDown и сконвертирована в HTML с помощью скрипта Parsedown.

Вверх 🡑