Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Mini-project: interactive display of SVG



  • Anyone interested in a mini project for rendering SVG dynamically?

    The following is a high level, conceptual description of a Qt project requirement.

    The objective is to create a Qt dialog containing an area for entering hand-crafted SVG as
    follows:

    1. An area where a user can type or paste SVG Tiny elements in text form (without SVG root element,
      namespaces, etc). Ie. for color gradients, line drawing, text, etc.

      E.g. (1)

       <circle cx="40pt" cy="40pt" r="24pt" style="stroke:#006600; fill:#00cc00"/>
       <circle cx="40%" cy="40%" r="24%" style="stroke:#006600; fill:#00cc00"/>
      

      E.g. (2)

       <linearGradient id="lGrad1" gradientTransform="rotate(20 1.5 .1)" >
          <stop offset="0%" stop-color="white"/> <stop offset="20%" stop-color="#4c4c48"/>
          <stop offset="60%" stop-color="#a9a9a9"/> <stop offset="88%" stop-color="#3c3c38"/>
       </linearGradient>
       <rect fill="url(#lGrad1)" width="100%" height="100%" rx="0.5mm" ry="1.0mm" />
      

      This would be a re-sizable text entry area, w/ scrollbars as applicable.

      This area would have an associated Preview button.

      Note that the <svg> root element, and its x, y, width and height attributes, are omitted
      because the <svg> element and associated attribute values will be supplied at runtime
      by the higher-level application depending on the context in which the SVG code is
      used.

    2. A re-sizable display area showing rendered SVG

      After the Preview button in (1) above is clicked, the text in (1) is parsed/validated
      and if valid then displayed graphically in a re-sizable pop-up display area as rendered SVG.

      Ideally the parsing/validating process would highlight errors in the SVG code. But this is not essential. The usage is intended only for SVG aficionados ...

    When the user is happy he/she may click a Save button. The result is that the approved SVG code
    gets saved into a large XML structure, within a name-tagged <xSVG> element. For the purposes
    of this mini-project, it's sufficient that the SVG code can be saved to a file.

    I'm hoping this may be a not-too-difficult project. But I don't know much about Qt's inbuilt
    capabilities, or whether Qt can easily support such a concept.

    If anyone thinks this is do-able at reasonable cost, please feel ultra-welcome to contact me
    to discuss it, with the idea of subsequently being interested in providing a quotation for the
    work involved. (rick at datazone dot com). And hopefully in follow-up work on a large Qt GUI application.

    Rick


  • Lifetime Qt Champion

    Hi
    Just as a note.
    Qt only support SVG Tiny
    https://www.w3.org/TR/SVGMobile12/
    So SVG 1.1 might contain elements Qt won't support.



  • Ah! Many thanks for the info/correction. At first glance, SVG Tiny provides support for more than sufficient artifacts than needed in this case, so would be fine. So if/when I figure how to edit the OP, I'll change the reference from SVG 1.1 to SVG Tiny.
    Thanks again,
    /Rick


  • Lifetime Qt Champion

    @concreteRick
    Hi
    You can edit with the alt text
    menu.

    Also, as far as i know
    https://doc.qt.io/qt-5/qsvgrenderer.html
    does not really give any error output so it might not be possible to
    provide code highlighting for invalid constructs.

    As least i did not see any while fiddling with some SVG from Inkscape that Qt would not draw
    the text part correctly.



  • Many thanks. No worries. Code-highlighting not so important for this mini-project. So it can be skipped. /Rick


Log in to reply