Средний

5 мин

12K

Начиная с версии 9.0, в tcl/tk появилась возможность создавать изображения image из SVG-файлов (а значит и сохранять их в png-формате). Всё было хорошо до тех пор пока мне для статьи на сайте Tcler's Wiki ни потребовался флаг США для кнопки переключения языка интерфейса:

В Интернете нашелся компактный svg-файл с изображением этого флага:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1235" height="650" viewBox="0 0 7410 3900">
<path d="M0,0h7410v3900H0" fill="#b31942"/>
<path d="M0,450H7410m0,600H0m0,600H7410m0,600H0m0,600H7410m0,600H0" stroke="#FFF" stroke-width="300"/>
<path d="M0,0h2964v2100H0" fill="#0a3161"/>
<g fill="#FFF">
<g id="s18">
<g id="s9">
<g id="s5">
<g id="s4">
<path id="s" d="M247,90 317.534230,307.082039 132.873218,172.917961H361.126782L176.465770,307.082039z"/>
<use xlink:href="#s" y="420"/>
<use xlink:href="#s" y="840"/>
<use xlink:href="#s" y="1260"/>
</g>
<use xlink:href="#s" y="1680"/>
</g>
<use xlink:href="#s4" x="247" y="210"/>
</g>
<use xlink:href="#s9" x="494"/>
</g>
<use xlink:href="#s18" x="988"/>
<use xlink:href="#s9" x="1976"/>
<use xlink:href="#s5" x="2470"/>
</g>
</svg>

Я быстренько набросал несколько строк на tcl/tk, чтобы посмотреть воочию на флаг:

.label .lab -bg yellow
pack .lab -fill both -expand 1 -padx 1c -pady 1c 
set img3 [image create photo -file /tmp/FlagUSuse.svg -format {svg -scaletowidth 200}]
.lab configure -image $img3

То, что я увидел, никак не совпадало с моими ожиданиями:

Флаг получился вместо многозвёздного (правый скриншот)  однозвёздным (левый скриншот). Никаких сообщений при этом не было. Анализ svg-файла показал, что для прорисовки звёздно-полосатого флага в xml-разметке элегантно используется элемент <use>, а команда image create его просто игнорирует. Это игнорирование хорошо видно на скриншоте.

Такая же ситуация с отображением этого флага уже на svg-холсте и при использовании пакета svg2can, т.е. и этот пакет не обрабатывает элемент «use», встречающийся в svg-файлах.

При этом пакет svg2can для рендеринга svg-файлов  использует команды из пакета tkpath (сейчас добавлена и поддержка пакета tko). Я попытался набросать код на tcl для интерпретации xml-кода с элементами «use» в команды пакета tkpath, но очень скоро понял, что эту задачу просто так в лоб не решить.

Вот что написал один человек:

Разбор SVG-файлов — дело элементарное; это всего лишь XML. Однако интерпретация - совсем другое дело.

Но! Но я наткнулся на замечательный проект resvg.

В проекте resvg, помимо библиотеки, есть и две утилиты resvg и usvg. Утилита resvg, которая преобразует svg-файл в png-изображение,  в данном контексте нас не интересует. А вот утилита usvg оказалось именно тем, что позволило решить проблему элемента <use> (и не только это) в svg-файлах. Утилита usvg преобразует входной SVG-файл в строго типизированную древовидную структуру, где все элементы, атрибуты, ссылки и другие возможности SVG уже настроены и представлено в максимально простой форме, в которой отсутствует элемент use. Таким образом, не нужно беспокоиться о большинстве проблем, связанных с анализом SVG-файлов. и можно сосредоточиться только на этапе рендеринга.

Как работает утилита usvg каждый может увидеть, применив её к svg-файлу со звёздно-полосатым флагом:

usvg <исходный svg-файл> <выходной svg-файл>

Сохраним xml-код флага в файле FlagUSuse.svg, пропустим его через жернова утилиты  usvg, а резудьтат сохраним в файле FlagUSusvg.svg:

usvg FlagUSuse.svg FlagUSusvg.svg

Если посмотреть на результирующий файл, то в нём не найдется ни одного элемента use.

Теперь создадим объект image, используя новый SVG-файл:

set img4 [image create photo -file FlagUSusvg.svg -format {svg -scaletowidth 190}]

И уже его вставим в виджет .lab:

.lab configure –image $img4

Флаг США принял привычный звёздно-полосатый вид (смотри правый скриншот выше).

Аналогичный результат был получен и при рендеринге обработанного svg-файла пакетом svg2can (команда svg2can::SVGFileToCanvas <svg-холст> <svg-файл>):

package require tkpath
package require svg2can 
#Создаем svg-холст
tkp::canvas .flag -bg yellow
#Размещаем на холсте новый svg-файл
set idflag [svg2can::SVGFileToCanvas .flag  /tmp/FlagUSusvg.svg ]
#Копируем изображение в нужное место холста и нужного размера
svg2can::copyGroup .flag .flag $idflag -width 190 -height 100 -x 1c -y 1c
.flag delete $idflag
pack .flag -fill none -expand 0

После этого возникло естественное желание иметь tcl-пакет парсинга svg-файлов на базе библиотеки resvg. И тут оказалось, что не я один озабочен этой проблемой. Я наткнулся на абсолютно свежий проект tresvg.

Это очень красивая tcl-обертка вокруг библиотеки resvg. Я бы её рекомендовал как учебное пособие. Здесь есть всё – и различные ОС, и интеграция различных языков программирования (Rust, C, Tcl/tk) и применение различных технологий. Единственное, что смутило, это использование массы дополнительных  пакетов. Именно поэтому было решено всё же создать простой пакет - аналог утилиты usvg. Так появился на свет пакет tclusvg на базе библиотеки resvg, с включением в неё функции resvg_tree_to_xml из проекта tresvg.

На данный момент в пакете tclusvg реализована единственная одноименная команда:

package require tclusvg
tclusvg 
#Ниже вывод команды
Package version Usvg: 0.47
Usage: tclusvg <svg-xml> [[-file | -data] | -size]

В качестве параметров ей указывается строка, которая может содержать имя svg-файла (по умолчанию или опция -file) или xml-структуру с описанием svg-изображения (опция -data). Если задана опция -size, то команда возвращает размер изображения в виде списка <ширина> и <высота>:

tclusvg /tmp/FlagUSuse.svg -size
#Ниже вывод команды
1235 650

Если опция -size не задана, то возвращается XML-код svg-изображения в максимально простой форме, который теперь можно рендерить как с помощью команды стандартной команды tcl/tk image или команды svg2can::SVGXmlToCanvas из пакета svg2can. Принципиальное отличие этих двух методов рендеринга состоит в том, что при использовании пакета svg2can мы продолжаем работать с изображением как с svg-изображением, и можем легко менять как его отдельные характеристики, так и его геометрию без потери качества. Кстати, это замечание касается и пакета tresvg.

Пакет tclusvg добавлен в проект TkSVGwidgets и его можно скачать здесь. Архив tclusvg содержит как готовые пакеты для Linux и Windows, так и исходный код.

В проекте svgwidgets на github-е можно найти и версию графического интерпретатора tclexecomp как для linux64 (папка tclexexcomp902), собранного из исходного кода tcl/tk-9.0.2, так и версию интерпретатора на базе tcl/tk-8.6 для платформ Linux64 и Win64 (папка tclexecomp200), с включенным в его состав пакетами tclusvg, svg2can и svgwidgets.

В папке проекта TkSVGwidgets добавлены две папки SVGviewFile и SVGviewFolders, в которых находятся две tcl-утилиты для просмотра svg-файлов с использованием пакета tclusvg:

Эти же примеры можно найти и в облачной демонстрации на сайте Tcler's Wiki:

Только здесь приходится констатировать, то без VPN-а доступа к демонстрации можно и не получить.