Шаг 1. Нарисуйте изображение (рекомендуется формат PNG)
Для лучшей наглядности используйте белый фон (#FFFFFF) и черный для линий
Лично для пиксельной графики я использую программу Paint.NET from getpaint.net
Я считаю, что это лучше, чем Photoshop для пиксельной графики.
Это похоже на MS Paint, за исключением того, что он позволяет прозрачные пиксели, имеет несколько инструментов и позволяет устанавливать правый и левый щелчки наотдельные цвета, которые даже Photoshop не может сделать (я использовал только версию для Mac)
Шаг 2. Изменение цвета
После того, как изображение нарисовано, установите фон в белый (#FFFFFF)и передний план становится полностью прозрачным
В Paint.NET все, что вам нужно сделать, это глобально выбрать черный с помощью волшебной палочки, а затем нажать клавишу удаления
Шаг 3: Преобразовать PNG в SVG
Этот сайт работал лучше всего для меня https://convertio.co/png-svg/
Есть и другие сайты, но большую часть времени они дадут вам файл размером 1 КБ, который представляет собой просто пустое изображение
Шаг 4:исправлятьрасстояниеВы будете благодарить меня позже.
Предпочтительно использовать NotePad ++, поскольку обычный Блокнот не заботится о пробелах
NotePad ++ понимает табуляцию и распознает большинство языков, включая XML, что помогает, если вы пропустите закрывающий тег
Шаг 5: Добавьте необходимые теги для Acumatica
Внутри тега svg добавьте тег символа. Присвойте ему идентификатор
id = "PX_IconName"
Acumatica преобразует подчеркивания в пробелы
Идентификатор должен быть уникальным для системы, как и имя файла, "PX" можно заменить на 2 буквыПрефикс, назначенный вашему проекту, если Acumatica предоставил вам его.
Скопируйте атрибут viewBox из тега svg и вставьте его после идентификатора в теге символа
Внутри тега g удалите атрибут fill и добавьте классattribute class = "ac"
Не забывайте тег после тега
Возможно, вы захотите установить для атрибута обводки g значение "round", если изображение имеет кривые,это может иметь значение
Файл должен выглядеть следующим образом
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000" preserveAspectRatio="xMidYMid meet">
<symbol id="PX_IconName" viewBox="0 0 400.000000 400.000000">
<g transform="translate(0.000000,400.000000) scale(0.100000,-0.100000)" stroke="none">
<path d="M1923 2950 c-12 -5 -26 -17 -31 -27 -14 -27 13 -1382 28 -1397 6 -6 45 -11 91 -11 110 0 109 -2 109 191 0 84 5 390 11 680 l10 527 -21 21 c-17 17 -35 21 -98 23 -42 2 -87 -1 -99 -7z"/>
<path d="M1923 1325 c-44 -19 -56 -48 -56 -140 -1 -129 31 -165 145 -165 107 0 148 44 148 160 0 82 -20 127 -64 145 -44 19 -131 19 -173 0z"/>
</g>
</symbol>
</svg>
Шаг 6: Добавить файл svg в экземпляр
Файл svg находится в папке \ Content \ svg_icons экземпляра, затем мы включаем его в пакет для распространенияiles
Примечания:
После долгих проб и ошибок, наряду с чтением HTML, сгенерированного Acumatica, я обнаружил, что белое фоновое изображение с прозрачным передним планом вместе с тегом class = "ac" позволяетAcumatica для обработки цвета изображения.
Если вы не выполните эти шаги, изображение всегда будет черным или просто невидимым. Оба эти результата выглядят плохо.
Еще одна вещь, которую стоит отметить, - Acumatica в настоящее время не допускает использование пользовательских значков в виджетах Dashboard или на Mobile SiteMap
Если вы считаете, что эти две функции должны быть реализованы, проголосуйте за идеи здесь:
https://feedback.acumatica.com/ideas/ACU-I-1917
https://feedback.acumatica.com/ideas/ACU-I-2029