SVG2QML

Convert SVG file to native QML file. Преобразует SVG файл в готовый нативный QML файл.

See Original SVG file and Converted QML file

Changelog

Version 1.3

• Shape x,y,width,height as content
• Fix parent styles
• Fix gradients in negative values

Version 1.2

• Reworked the creation of gradients and gradientTransform
• Separately output transform matrix
• Defs order

Version 1.1

• Migrated to Qt 6 (6.2.0)
• Support quadratic Bezier (path qQ)
• Added Drag&Drop area for files to convert
• Fix bug with transform

Поддерживаемые элементы:

В скобках указаны поддерживаемые индивидуальные параметры. Список общих дальше.

• svg
• defs
• title
• desc
• g
• line (x1, y1, x2, y2)
• rect (x, y, width, height, rx, ry)
• circle (cx, cy, r)
• polyline (points)
• polygon (points)
• ellipse (cx, cy, rx, ry)
• path ("d" commands: "mcsqlvhvazMCSQLVHAZ")
• clipPath (g, rect, circle, ellipse, path)
• linearGradient (x1, y1, x2, y2, gradientTransform)
  • stop (offset, stop-color, stop-opacity)
• radialGradient (cx, cy, r, fx, fy, gradientTransform)
  • stop (offset, stop-color, stop-opacity)
• style (base selector "#id", ".class")

Поддерживаемые общие параметры

• opacity
• fill (color, opacity, gradient)
• stroke (color, opacity, width, linejoin: bevel/miter/roud, linecap: butt/round/square, miterlimit, dasharray)
• style (only upper parameters)
• transform (translate, scale, rotate, matrix3x2)
• id
• class

В планах

• text
• image

Problems

Tips

• In Inkscape save as "simple svg".
• In Adobe Illustrator save as "SVG Tiny 1.1".

Как работает

Все SVG.g преобразуются в QML.Item, соблюдая вложенность.
Все SVG.circle, SVG.line, SVG.ellipse, SVG.rect преобразуются сначала в SVG.path,
за тем, если указан SVG.transform, то он сразу применяется к SVG.path.
Все SVG.path преобразуются в QML.Shape { QML.ShapePath { QML.PathSvg { path: "path command" }}}.
Все SVG.clipPath преобразуются сначала в SVG.path, а за тем
преобразуются в QML.OpacityMask { maskSource: QML.Shape { ... } }
Все SVG.linearGradient, SVG.radialGradient преобразуются в QML.LinearGradient и QML.RadialGradient для каждой QML.ShapePath соответственно.
Если у градиентов есть gradientTransform, то будет две QML.Shape у одной заливка обычным цветом, у другой градиент и трансформация.
Так же будет сделана QML.OpacityMask, что бы градиент не вылезал за пределы основной фигуры.

Что не поддерживается

• Всё остальное, что не указано, увы =(.

Почему? Для наших дизайнов этого хватает. Вы можете в pull request прислать примеры svg, чего бы хотелось.

Зависимости

• Qt >= 6.2.0, thats all =)

License

GPL V3