logo

nixscript

Keep it simple, stupid !

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

SVG Введение. Структура файла.

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

Введение

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

Файл SVG является векторным изображением. Прелесть в том, что изображение легко масштабируется без потери качества/чёткости. Об этом можно прочитать где угодно. В википедии, на многочисленных сайтах веб-разработчиков и т.д. Но мало где написано, как работать с SVG в терминале.

В серии статей о SVG, я расскажу, именно о работе с файлом в терминале. И даже если вы не любите терминал, статьи помогут вам лучше понимать этот формат, применять полученные знания при разработке веб-страниц, оформлении Xwindows, буклетов, презентаций, печатной продукции и много где ещё.

Структура файла

Загловок

Заголовок файла состоит из тега SVG, открывающего код. Атрибуты тега сообщают программе, выводящей изображение на экран, о формате изображения и о его размере.

<svg width="1280" height="967.6" viewBox="0 0 926.04 700.03" xmlns="http://www.w3.org/2000/svg">

К сожалению (но к счастью лично для меня), у меня нет техники компании Apple, и поэтому, я не имею возможности объяснить (да и понять тоже), как подготовить файл для отображения в браузере Safary. Но во всех остальных браузерах и программах файл будет отображаться.

Почему я отвлекса на Safary? Потому что в первом теге файла SVG задаются важные параметры для отображения в Safary. Любая другая программа просто не обращает внимания, если не будет аттрибутов width, height и viewbox. Достаточно такого тега:

<svg xmlns="http://www.w3.org/2000/svg">

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

Конец файла

Файл заканчивается закрывающим тегом

</svg>

HTML

SVG может быть встроен в веб-страницу. Это можно сделать несколькими способами.

С первым вариантом всё просто:

<img src="path/to/image.svg">

Со вторым вариантом ещё проще, на мой взгляд:

<svg>
... код картинки
</svg>

Есть и другие способы. Информацию о них легко найти в интернете.

Код изображения

По сути, код изображения, это указание типа объекта и его параметры с координатами.

К примеру, так мы рисуем квадрат с отступом 10 пикселей сверху и слева, шириной и высотой 20 пикселей, заполненый красным цветом:

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

Существует несколько простых фигур:

Каждая фигура имеет свой набор параметров. Прямоугольник имеет базовую точку координат, ширину и высоту. Кроме того, может иметь радиус скругления углов, цвет заливки, цвет обводки (контура), толщину обводки. При помощи дополнительных параметров, универсальных для большинства фигур, можно задавать трансформацию (поворот, наклон, смещение, анимацию) и несколько других свойств.

Полный код файла

В конечном итоге, мы получаем простое изображение красного квадрата, если ориентироваться на приведённый пример:

<svg xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="20" height="20" fill="#f00"/>
</svg>

Можно открыть его программой просмотра изображений, растягивать, сжимать, но края квадрата всегда будут оставаться ровными и чёткими, в отличие от форматов PNG, JPEG, WEBP. Даже GIF не во всех программах отображает чёткие края, хотя в GIF, так же как и в BMP, пиксель описан жёстко и не допускает размытия. Но как GIF, так и BMP не позволят получить ровную прямую диагональ. А чистый SVG не приспособлен для вывода точечного изображения.

Простой пример BASH

И так, после того, как мы создали наш квадрат в тексовом редакторе, логично попробовать создать его в терминале, с помощью скрипта, с возможностью указания параметров.

Создадим скрипт.

#!/bin/bash

if [[ -z "$1" ]]
then
    O=$(basename $0)
    echo -e "Использование: $O [ключ] [параметр]
    -x  Координата X
    -y  Координата Y
    -w  Ширина прямоугольника
    -h  Высота прямоугольника
    -f  Цвет заливки в формате #RRGGBB
    --help  Эта подсказка"
    exit
fi

while [ -n "$1" ]
do
    case "$1" in
        -x) X="$2";;
        -y) Y="$2";;
        -w) W="$2";;
        -h) H="$2";;
        -f) F="$2";;
        --help) O=$(basename $0)
            echo -e "Использование: $O [ключ] [параметр]
            -x  Координата X
            -y  Координата Y
            -w  Ширина прямоугольника
            -h  Высота прямоугольника
            -f  Цвет заливки в формате #RRGGBB
            --help  Эта подсказка"
            exit;;
    esac
    shift
done

echo "<svg xmlns=\"http://www.w3.org/2000/svg\">
<rect x=\"$X\" y=\"$Y\" width=\"$W\" height=\"$H\" fill=\"$F\"/>
</svg>" >rectangle.svg
echo "Файл rectangle.svg готов"

Это самый простейший пример формирования SVG в терминале.

Заключение

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

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

К примеру, подсказки я подгатавливаю одной командой в терминале. Причём не только для сайта nixscript.ru, но и для группы в ВК, и для instagram. Одной командой!

Автор: grigruss 26.10.2019

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

Вверх 🡑