Редактирование векторных изображений SVG на смарте

Доброго времени Вам жители сайта!
Совсем недавно я увлекся рисованием векторных изображений, а в частности иконок для наших зверьков - смартов
Однако возможно это было лишь на большом брате - ПК. Я же, как древний человек, не имеющий своего компьютера пользуюсь рабочим... Но пришла пора отпуска, компьютер остался на рабочем месте, а рисовать хочется до жути
Благо на нашем горизонте появилась замечательная программа для создания и редактирования (правда только своей собственной) векторной графики - vDraw, что это за программа вы узнаете перейдя на форум по ссылке ниже.
Говорить о том как пользоваться этой программой я не буду, об этом есть отдельная статья и все та же тема на форуме
Итак, зачем же я пишу данную статью... А за тем, что как я уже написал выше, программа vDraw не умеет открывать и соответственно редактировать файлы svg созданные другими программами, да и возможности самой vDraw сильно ограничены. Эта же статья поможет вам понять суть векторной графики и способы ее редактирования, здесь нужно отметить, что отредактировать получится только изображени в формате svg но не сжатые svgb.
Для начала нужно разобраться с тем, что же такое svg изображение.
Говоря простыми словами (а другими я и не умею ), файл svg представляет из себя текстовый файл вида html страницы. Данный файл, как любая html страница имеет заголовок и содержание. Содержание - как раз и есть наше векторное изображение, а точнее его параметры. Само изображение состоит (рисуется) отдельными элементами и фигурами, так вот в содержании этой страницы и указываются параметры этих фигур, то есть их названия, координаты, цвета и прочая святотень.
С понятием мы разобрались и поняли что файл svg это простой текстовый файл в кодировке utf-8, который можно открыть и разумеется отредактировать.
Теперь приступим к самому интересному:
1. Изменение размера (окна отображения) - читаем заголовок:
^svg width~*100%* height~*100%* viewBox~*0 0 240 320* xmlns~*https://www.w3.org/2000/svg* version~*1.1* ^
Где: 240 - размер окна по оси Х; 320 - размер окна по оси Y. Изменяем на нужные.
2. Прозрачность - значение пишется в строке после названия элемента: opacity~*0.6*, где 0.6 - уровень видимости, то есть 1.0 - 0.6 ~ 0.4 и соответственно 40% прозрачности.
3. Текст - после определенного (выбранного вами) элемента, его строки, добавляется строка:
^text style~*font-size:24px; stroke-width:5px; stroke:#00C0; fill:#ff0000* x~*15* y~*25* ^Ваш текст^/text^
Где: 24px - размер шрифта; ff0000 - цвет шрифта; 15 - положение по оси Х; 25 - положение по оси Y.
4. Поворот - перед строкой поворачиваемого элемента пишем строку:
^g transform~*rotate(15)* ^
а после элемента пишем строку:
^/g^
Где 15 - угол поворота относительно координаты 0х0.
5. Линейных градиент - перед строкой элемента, к которому хотим применить градацию цветов пишем:
^linearGradient id~*SVGID_1_* gradientUnits~*userSpaceOnUse* x1~*50* y1~*50* x2~*80* y2~*80*^
^stop offset~*0* style~*stop-color:#FF3333*/^
^stop offset~*1* style~*stop-color:#800000*/^
^/linearGradient^
Где: SVGID_1_ - идентификатор, к каждому элементу нужен свой, т.е. SVGID_2_, SVGID_3_ и так далее; x1~*50* y1~*50* x2~*80* y2~*80* - координаты начала и конца градации (внимательнее с координатами, иначе градация может вылететь за пределы элемента); ^stop offset~*0* style~*stop-color:#FF3333*/^ - направляющая (их может быть сколько угодно, так как градация может быть в нескольких цветах: красный-зеленый-синий), где offset~*0* - интервал от 0 до 1 (верхняя строка имеет значение 0, а нижняя 1. Между ними может быть любой другой интервал в сотых) а style~*stop-color:#FF3333* - цвет, при этом в верхней строке указывается нижний цвет, а в нижней верхний.
После установки параметров, необходимо задать вместо значения цвета заливки значение идентификатора SVGID_1_ вот так: fill~*url(#SVGID_1_)*
6. Радиальный градиент - перед строкой элемента, к которому хотим применить градацию цветов пишем:
^radialGradient id~*XMLID_1_* cx~*50* cy~*60* r~*70* fx~*80* fy~*90* gradientTransform~*matrix(1.24 0 0 1.0952 -4.2406 -0.2293)* gradientUnits~*userSpaceOnUse*^
^stop offset~*0* style~*stop-color:#FF0000*/^
^stop offset~*1* style~*stop-color:#000000*/^
^/radialGradient^
Где: XMLID_1_ - идентификатор, к каждому элементу нужен свой, т.е. XMLID_2_, XMLID_3_ и так далее; cx1~*50* cy1~*60* - координаты центра радиального градиента; r~*70* - его радиус; fx~*80* fy~*90* - координаты центра смещения (внимательнее с координатами, иначе градация может вылететь за пределы элемента); ^stop offset~*0* style~*stop-color:#FF0000*/^ - направляющая (их может быть сколько угодно, так как градация может быть в нескольких цветах: красный-зеленый-синий), где offset~*0* - интервал от 0 до 1 (верхняя строка имеет значение 0, а нижняя 1. Между ними может быть любой другой интервал в сотых) а style~*stop-color:#FF0000* - цвет, при этом в верхней строке указывается центральный цвет, а в нижней периферийный.
После установки параметров, необходимо задать вместо значения цвета заливки значение идентификатора XMLID_1_ вот так: fill~*url(#XMLID_1_)*
7. В любом элементе можно изменить значения:
x1~*72* - в Линие, положение по оси Х.
y1~*159* - в Линие, положение по оси У.
При этом в Линие дается по 2 значения, из которых 1 - координаты начальной точки, 2 - координаты конечной точки, а в Прямоугольнике - 1, только координата начальной точки (левого верхнего угла).
points~*94,121* - в Полигоне и Полилиние, координаты опорных точек по осям Х,У.
cx~*112* - в Эллипсе, положение по оси Х.
cy~*107* - в Эллипсе, положение по оси У.
rx~*107* - в Эллипсе, радиус по оси Х. В Прямоугольнике - радиус закругления угла по оси Х.
ry~*102* - в Эллипсе, радиус по оси У. В Прямоугольнике - радиус закругления угла по оси У.
stroke-width~*2* - толщина линии обводки.
width~*65* - в Прямоугольнике, ширина по оси Х.
height~*50* - в Прямоугольнике, высота по оси У.
stroke~*#000000* - цвет обводки.
fill~*#004000* - цвет заливки.
При редактировании цвета, его можно убрать совсем (сделать прозрачным) вписав вместо значения - none.
8. Вот элементы (имена) которые можно изменить вручную:
line - линия
rect - прямоугольник (прямоугольник с закругленными углами)
polyline - полилиния
polygon - полигон
ellipse - эллипс
text - текст
Здесь и так все понятно
В статье некоторые, не отображающиеся, символы заменены:
^ - угловые скобки
* - кавычки
~ - знак равенства
В прикрепленном файле находится архив со статьей с правильными знаками.
P.S. Кому это не нужно и кажется бредом - просто идите мимо, статья написана для тех кому интересно.
P.P.S. Статья написана для темы на форуме VDraw.
З.Ы. Я не сильный специалист, и все что я здесь описал, узнал методом *научного тыка*, так что не судите строго

Здесь архив со статьей и нормальными символами (2,23 Kb)