Inkscape.org
Beyond the Basics Bulk generate SVGs with unique QR code in placeholder
  1. #1
    SjakieM SjakieM @SjakieM
    *

    Hi Inkscape community,

    i manually created 50+ of the same drawings each containing some visuals and a unique QR code using the built-in QR code generator. It generates a pretty clean QR path and i would like to generate a lot more without having to create each file manually. I haven't found a way to programmatically use the built in QR generator. I looked at some online SVG QR generators, but the xml code in the SVG files differs a lot from the built-in path that Inkscape generates. For example: 

    Inkscape generates: d="m 1609.89,1719.3 h -41.68 c -2.8774,0 and so on

    And online tools generate: <rect fill="#ffffff" stroke="none" x="0" y="0" width="185" height="185" shape-rendering="crispEdges"/>
            <rect fill="#000000" stroke="none" x="0" y="0" width="5" height="5" shape-rendering="crispEdges"/>
            <rect fill="#000000" stroke="none" x="5" y="0" width="5" height="5" shape-rendering="crispEdges"/>
            <rect fill="#000000" stroke="none" x="10" y="0" width="5" height="5" shape-rendering="crispEdges"/>
            <rect fill="#000000" stroke="none" x="15" y="0" width="5" height="5" shape-rendering="crispEdges"/>
            <rect fill="#000000" stroke="none" x="20" y="0" width="5" heig ... and so on.

    My guess is that i should be able to replace the d parameter directly in the SVG file of the manually created QR codes if i can use the same format from other generated QR svg's. This way all other styling surrounding the d parameter should still apply. I haven't found an easy way to generate QR codes in the same format, I don't know if i can easily convert the format and i am not sure what the best way would be to do something similar. I also looked at embedding SVG's, but ideally i would like to programmatically embed and adjust the size of the embedded QR svg while doing this..

    Can anyone help me to achieve this or point me in the right direction? 

    Thanks!

  2. #2
    SjakieM SjakieM @SjakieM

    it seems i'm almost there. I can just replace the <path> node that holds the QR code in the actual visual with the <rect> nodes of the generated QR and use a transform parameter with a scale to a calculated factor value based on the original size of the QR and the size newly generated QR code. Although the x, y, width and height in the newly generated QR code <rect> nodes are very different, it inherits the scale factor and makes these values all relative. This is great! Now i should be able to program something that just search and replaces xml. Amazed by the power of the SVG format :)

    Still curious to feedback from this community.

  3. #3
    Tyler Durden Tyler Durden @TylerDurden

    Any text editor can search and replace text in XML documents, if that helps.

  4. #4
    SjakieM SjakieM @SjakieM

    meh that wouldn't help me since it requires manually search and replacing in that case which was the initial reason to look for automated options :) I built a console app that replaces the specific QR node in the SVG with a set of nodes from newly generated QR codes. This seems to work although i still have a strange issue. Somehow the formatting of the XML is slightly different when my console app saves the XML as an SVG file in regards to white spaces between XML elements. The SVG files display correctly in Edge and Illustrator, but some text paths are positioned differently if i open the same file in Inkscape. Specifically it seems to be caused by white spaces between <text> and <tspan> nodes.

    For me this currently is not an issue since i use Illustrator to convert the resulting files to CMYK and PDF as the print company requires, and these results show up as expected :) I can now generate unlimited variations with unique QR codes instead of spending evenings clicking the same routine for each file. A happy man salutes :)

  5. #5
    inklinea inklinea @inklinea⛰️

    I don't have the time at the moment to write an example.

    For bulk replacement of elements across svg files, you can use the 'load' function of inkex.

    Here is an example I wrote a couple of years ago to replace a single symbol across files. It did not work properly because it's tricky to correct for transforms ( at least for me ) when using symbols. 

    However it should give you an idea. 

    https://gitlab.com/inklinea/symbol-replace

  6. #6
    SjakieM SjakieM @SjakieM

    Thanks inklinea. The idea is similar to what i achieved. I wrote an app in C# using straight forward Xml libraries and used the inkscape:label attribute that is generated by the built-in QR generator to find the node that i wanted to replace. Yours is more generic. Since i just replaced one QR code with another, for me it was sufficient to use the transform attribute on a parent g node like this 

    transform="translate(0,0) scale(2.605018622324217,2.605018622324217)"

    where the scale factor is just the aspect ratio between the size of the original QR code and the newly generated one to match the exact size and position. i  bet you should be able to use that too although dynamically positioning it differently might be the culprit for your use case ( i see that you x and y shift to center )

    Inkscape apparently has some custom XML interpretations that make white-spaces cause significant changes, that are not reflected in browser display or Illustrator f.e. I wonder if that is similar to your reason to state that your script did not work properly. Did you experience the same just opening SVG in browser? 

Inkscape Inkscape.org Inkscape Forum Beyond the Basics Bulk generate SVGs with unique QR code in placeholder