logo

nixscript

Keep it simple, stupid !

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

SVG Кроим код через bash

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

Как?

Легко! Мы имеем такие инструменты, как sed, head, tail, cut, wc, bc, echo, for, while, until ... Да с таким арсеналом можно с текстом (а SVG это именно текст) сделать что угодно.

Как я делаю подсказки? Сначала никак. Я чем-то занимаюсь, работаю, и в процессе делаю что-то, что стоило бы рассказать вам.

Процесс изнутри

Когда я запускаю команду, скрипт открывает текстовый редактор из переменной $EDITOR. В редакторе я имею возможность корректировать листинг. Удалить лишние строки, добавить promprt $ в начало строки, добавить комментарий...

Когда текст готов, я сохраняю и закрываю редактор. А скрипт продолжает действия.

Заранее заготовленный и оптимизированный шаблон, в подсказках, изначально имеет только верхнюю часть с баннером и фон. Скрипт накладывает на это текст из редактора. Не сразу весь. Сначала текст прогоняется через sed, который добавляет теги, заменяет, если что-то необходимо заменить, делает всё что нужно для трёх форматов: SVG, MD, HTML.

Когда это готово, скрипт конвертирует SVG в PNG и WEBP. Причём в PNG делается три варианта, для ВК, instagram и nixscript.ru. А уже затем раскидывает всё по нужным местам. На nixscript.ru и в ВК. С инстаграм пока не делал автоматику, заливаю со смартфона руками, но API у инстаграма есть, можно и это сделать.

Графики

С помощью SVG можно рисовать графики и делать мониторинги. К примеру вот график использования ОЗУ, который раз в секунду опрашивает систему и фиксирует результат.

#!/bin/bash
D=0
M=''
until [[ 1 != 1 ]]
do
    F=($(free | grep 'Mem:'))
    Y=$(bc <<< "scale=2; ${F[2]}/10000")
    if (($D>0)); then M+='L'; fi
    M+="$D $Y"
    echo '<svg viewBox="0 0 600.0 400.0" xmlns="http://www.w3.org/2000/svg">
    <path stroke-width="1" stroke="#0f0" fill-opacity="0" d="M'$M'" />
    </svg>' >tmp.svg
    D=$((D+2))
    sleep 1
done

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

Прервать работу скрипта можно через Ctrl^.

Вот результат работы скрипта:

SVG result

Стоит отметить, что в данном примере график перевёрнут, относительно привычного восприятия. То есть максимальный показатель внизу, а минимальный вверху. Поэтому на графике не скачок, а проседание. Но саму идею, думаю, вполне понятно.

Заключение

На данный момент у меня закончились идеи, что же ещё можно рассказать про SVG такого, о чём не пишут в каждой второй статье. Но по сути, важно, чтобы вы поняли главное. SVG - это тот формат, который как нельзя лучше годится для работы в чистом терминале, для любой... нет... Для АБСОЛЮТНО ЛЮБОЙ задачи. А уж если нужно результат в другом формате, ничто не мешает сделать так

inkscape tmp.svg --export-png="tmp.png" -w1920 -h2080

или что-то подобное и получить результат в нужном формате.

Если есть идеи, предложения или нужна помощь - пишите мне.

Обновление (02.12.2019)

В дополнение к статьям, я записал короткое видео, как можно вставлять цветной текст в картинки SVG. Посмотреть его можно здесь, на сайте, или на канале nixscript в YouTube.

Автор: grigruss 18.11.2019

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

Вверх 🡑