Нужны идеи для автоматизированной генерации изображений SVG

@LeonDTym · Регистрация: 25.09.2019

Студворк — интернет-сервис помощи студентам

Доброго времени суток дорогие пользователи форума.
Нужна помощь в оптимизации читабельности кода.
Разработал я как-то проект для генерации изображений на основе оригинального шаблона.
Времени было мало на разработку поэтому в голову пришла простейшая идея принцип работы которой опишу далее.
Принцип работы:

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

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

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
                                if(NameAndSure <= 23) //ФИО в 2 строки
                                {
                                    FIO = "<text  " +'\n'+
                                    "   style=\"font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:318.55px;line-height:1.1;" +
                                    "font-family:Arial;-inkscape-font-specification:'Arial, Bold';font-variant-ligatures:normal;" +
                                    "font-variant-caps:normal;font-variant-numeric:normal;" +
                                    "font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ac8475;stroke-width:26.5456\" " + '\n'+
                                    "   x=\"9045.2998\"" + '\n'+
                                    "   y=\"3501.4851\"" + '\n'+
                                    "   class=\"fil14 fnt16\"" +'\n'+
                                    "   id=\"FIO\" transform=\"scale(0.99258165, 1.0074738)\">" +
                                    "<tspan" + '\n'+
                                    "     id=\"tspan1967\"" +'\n'+
                                    "     style=\"font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;" +
                                    "font-size:318.55px;font-family:Arial;-inkscape-font-specification:'Arial, Bold';font-variant-ligatures:normal;font-variant-caps:normal;" +
                                    "font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:-14.5521px;fill:#000000;stroke-width:26.5456\"" + '\n'+
                                    "     x=\"9045.2998\"" + '\n'+
                                    "     y=\"3501.4851\"" + '\n'+
                                    "     sodipodi:role=\"line\">" +item.kid_surname.ToUpper()+ " " +item.kid_name.ToUpper()+//
                                    "</tspan>" +patronymic+ "</text>";
                                }
                                else //ФИО в три строки
                                {
                                    FIO = "<text  xml:space=\"preserve\" " + '\n'+
                                    "   style=\"font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;" +
                                    "font-size:318.55px;line-height:1.1;font-family:'Optima Cyr';-inkscape-font-specification:'Optima Cyr, Bold';font-variant-ligatures:normal;" +
                                    "font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;" +
                                    "text-anchor:middle;fill:#ac8475;stroke-width:26.5456;letter-spacing:-14.55208318px\" " + '\n'+
                                    "   x=\"11295.54\"" + '\n'+
                                    "   y=\"3501.4851\"" + '\n'+
                                    "   transform=\"scale(0.99258165, 1.0074738)\"" + '\n'+
                                    "   id=\"FIO\">" +
                                    "<tspan" +'\n'+
                                    "     id=\"tspan1967\"" +'\n'+
                                    "     style=\"font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;" +
                                    "font-size:318.55px;font-family:Arial;-inkscape-font-specification:'Arial Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;" +
                                    "font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;stroke-width:26.5456\"" + '\n'+
                                    "     x=\"11295.54\"" + '\n'+
                                    "     y=\"3501.4851\"" + '\n'+
                                    "     sodipodi:role=\"line\">" +item.kid_surname.ToUpper()+//
                                    "</tspan>"+
                                          "<tspan" +'\n'+
                                    "     id=\"tspan1960\"" +'\n'+
                                    "     style=\"font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;" +
                                    "font-size:318.55px;font-family:Arial;-inkscape-font-specification:'Arial Bold';font-variant-ligatures:normal;font-variant-caps:normal;" +
                                    "font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;stroke-width:26.5456\"" + '\n'+
                                    "     x=\"11295.54\"" + '\n'+
                                    "     y=\"3800.312\"" + '\n'+
                                    "     sodipodi:role=\"line\">" +item.kid_name.ToUpper()+//
                                    "</tspan>"
                                    + "<tspan" + '\n' +
                                    "     style=\"font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;" +
                                    "font-size:318.55px;font-family:Arial;-inkscape-font-specification:'Arial Bold';font-variant-ligatures:normal;font-variant-caps:normal;" +
                                    "font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;stroke-width:26.5456\"" + '\n' +
                                    "     x=\"11295.54\"" + '\n' +
                                    "     y=\"4245.7168\"" + '\n' +
                                    "     id=\"tspan1971\"" + '\n' +
                                    "     sodipodi:role=\"line\">" + item.kid_patronymic.ToUpper() + //
                                     "</tspan>" +
                                     "<tspan     sodipodi:role = \"line\"     x = \"11295.54\"     y = \"4620.0132\"     id = \"tspan1043\"     style = \"line-height:1.25;display:inline\" />" +
                                     "<tspan     sodipodi:role = \"line\"     id = \"tspan1041\"     x = \"11295.54\"     y = \"4994.3096\"     style = \"line-height:1.25;display:inline\" />" + "</text>"; 
                                }

После полной записи получается новый svg

И вот собственно проблема это читабельность кода из-за лишнего текста.
У меня конечно есть пару идей, например разбить эти текстовые элементы по условиям в другие файлы и в зависимости от ситуации читать эти файлы, но это тоже самое, что менять Шило на мыло.
Может у вас есть идеи для решения данной проблемы? Может можно как-то удобно читать и менять svg?

@Wolfdp · 26.11.2023, 08:21

гуглите C# шаблоны T4, либо можно глянуть такой пример для html

вариант 2: нагуглить какие-то либы по работе с SVG, и строить как-то в них.

@diadiavova · 27.11.2023, 08:25

Сообщение от LeonDTym

И вот собственно проблема это читабельность кода из-за лишнего текста.

Ну, генерацию текста можно в отдельный метод вынести. Если используется 11-я версия языка, то можно сделать как-то так

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
FIO = $"""
<text  
   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:318.55px;line-height:1.1;font-family:Arial;-inkscape-font-specification:'Arial, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#ac8475;stroke-width:26.5456" 
   x="9045.2998"
   y="3501.4851"
   class="fil14 fnt16"
   id="FIO" transform="scale(0.99258165, 1.0074738)" >< tspan
     id="tspan1967"
     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:318.55px;font-family:Arial;-inkscape-font-specification:'Arial, Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:-14.5521px;fill:#000000;stroke-width:26.5456"
     x="9045.2998"
     y="3501.4851"
     sodipodi:role="line" >{ item.kid_surname.ToUpper()}
{ item.kid_name.ToUpper()}</ tspan >{ patronymic}</ text > 
""";

Стили можно вынести в отдельный блок, а не впихивать в каждый элемент. Ну и не следует забывать, что с SVG можно работать как с XML, а не как с обычным текстом.

@John Prick · 27.11.2023, 10:26

Сообщение от LeonDTym

В шаблоне я добавил уникальный текст например (????????????) в месте после которого я буду менять svg

Достаточно было стандартных шаблонов "{0}" "{1}" и т.д.

@LeonDTym · 27.11.2023, 20:43 **[ТС]**

гуглите C# шаблоны T4, либо можно глянуть такой пример для html

вариант 2: нагуглить какие-то либы по работе с SVG, и строить как-то в них.

Спасибо за идею, сначала почитаю и погуглю про шаблоны T4.
Искал библиотеки для работы с svg находил подходящую Aspose.SVG но она имеет свои ограничения.

Добавлено через 8 минут
Можно попробовать, но есть вероятность, что итоговый результат может "поехать".

Добавлено через 7 минут

Сообщение от diadiavova

Стили можно вынести в отдельный блок, а не впихивать в каждый элемент. Ну и не следует забывать, что с SVG можно работать как с XML, а не как с обычным текстом.

Можно попробовать вынести стили, но боюсь итоговый результат может "поехать".
Про работу, как с XML документом пробовал... получилось не особо.

@diadiavova · 28.11.2023, 07:25

Сообщение от LeonDTym

Можно попробовать вынести стили, но боюсь итоговый результат может "поехать".

Если все правильно сделать, то не должен.

Сообщение от LeonDTym

Про работу, как с XML документом пробовал... получилось не особо.

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

Добавлено через 1 час 32 минуты
LeonDTym, вот набросал простой пример
Шаблон

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="1000" height="300" viewBox="0 0 1000 300" version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg"
  xmlns:svg="http://www.w3.org/2000/svg">
  <defs id="defs1">
    <style id="style3">
      <![CDATA[
      .class1 {
        font-family: sans-serif;
        font-size: 50px;
        line-height: 1.25;
      }
      ]]>
    </style>
  </defs>
  <g id="layer1">
    <text xml:space="preserve" x="124" y="97" id="text1" class="class1">
      <tspan id="tspan1" x="124" y="97"></tspan>
      <tspan x="124" y="150" id="tspan2"></tspan>
      <tspan x="124" y="203" id="tspan3"></tspan>
    </text>
  </g>
</svg>

Ну и собственно код, который оба варианта на консоль выводит

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
using System.Net;
using System.Xml;
using System.Xml.Linq;
using System.Xml.XPath;
using System.Xml.Xsl;
using System.IO;
using System.Text;
using System.Diagnostics;
 
 
XDocument GetSvg(XDocument template, Kid item)
{
    var tplt = XDocument.Load(template.CreateReader());
    var sur = tplt.XPathSelectElement("//*[@id='tspan1']");
    var name = tplt.XPathSelectElement("//*[@id='tspan2']");
    var pat = tplt.XPathSelectElement("//*[@id='tspan3']");
    if (sur != null) sur.Value = item.kid_surname;
    if (item.kid_name.Length + item.kid_patronymic.Length < 23)
    {
        if (name != null) name.Value = item.kid_name;
        if (pat != null) pat.Value = item.kid_patronymic;
    }
    else
    {
        if (name != null) name.Value = $"{item.kid_name} {item.kid_patronymic}";
    }
    return tplt;
}
 
var item1 = new Kid { kid_name = "Василий", kid_surname = "Пупкин", kid_patronymic = "Дормидонтович" };
var item2 = new Kid { kid_name = "Вассесуалий", kid_surname = "Пупкин", kid_patronymic = "Дормидонтович" };
var folder = Path.GetDirectoryName(Environment.ProcessPath);
var templateFile = Path.Combine(folder, "svg", "template.svg");
var xdoc = XDocument.Load(templateFile);
 
Console.WriteLine(GetSvg(xdoc, item1));
Console.WriteLine(GetSvg(xdoc, item2));
 
public struct Kid
{
    public string kid_name;
    public string kid_surname;
    public string kid_patronymic;
}

@Wolfdp · 28.11.2023, 07:57

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

А так либо строковые литералы (те три кавычки в C#11, удобно если там только этот кусок и ничего больше), либо прям полноценный шаблон (при условии что этот FIO часть большего файла, возможно имеет смысл прям всё туда запихнуть).

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Wolfdp 3789 / 1766 / 371 Регистрация: 15.06.2012 Сообщений: 6,543 Записей в блоге: 3
	26.11.2023, 08:21
	гуглите C# шаблоны T4, либо можно глянуть такой пример для html вариант 2: нагуглить какие-то либы по работе с SVG, и строить как-то в них. 1

@Wolfdp 3789 / 1766 / 371 Регистрация: 15.06.2012 Сообщений: 6,543 Записей в блоге: 3
	28.11.2023, 07:57
	Я бы xml юзал только из расчета того, что его можно разместить отдельным файлом и в случае чего без перекомпиляции можно подправить шаблон (правда никто не застрахует от кривого файла, из-за чего приложение либо будет выводить фигню, либо вообще крашиться). А так либо строковые литералы (те три кавычки в C#11, удобно если там только этот кусок и ничего больше), либо прям полноценный шаблон (при условии что этот FIO часть большего файла, возможно имеет смысл прям всё туда запихнуть). 0