Git Product home page Git Product logo

svg2qml's Introduction

SVG2QML

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

Original SVG file Converted QML file

See Original SVG file and Converted QML file

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

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

  • 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: "mcslvhvazMCSLVHAZ")
  • 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

  • def element must be defined before it used in xlink:href in svg file

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 >= 5.12, thats all =)

License

GPL V3

svg2qml's People

Contributors

riflio avatar schnitzeltony avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.