formatting .svg files?

mzimmers

Hi all -

I've been given a bunch of .svg files like this:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>icon/alert/warning_24px_sharp</title>
    <defs>
        <path d="M1,21.5 L23,21.5 L12,2.5 L1,21.5 Z M13,18.5 L11,18.5 L11,16.5 L13,16.5 L13,18.5 Z M13,14.5 L11,14.5 L11,10.5 L13,10.5 L13,14.5 Z" id="path-1"></path>
    </defs>
    <g id="icon/alert/warning_24px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <mask id="mask-2" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
        <use fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
    </g>
</svg>

Which produces something like the black triangle in this picture:
Is it possible to manipulate this file, using QML (not editing the file) to change the triangle's color?

Thanks...

fcarney

Maybe
ColorOverlay
or
SvgPath

The problem with path is you have to provide the svg string instead of file.

mzimmers

@fcarney DAMN you're good:

          Image {
            id: menuButtonIcon
            source: root.iconWarning
            anchors.right: reagentButton2.right
            anchors.rightMargin: (buttonWidth * 0.1)
            anchors.verticalCenter: parent.verticalCenter

            width: reagentButton2.icon.width
            height: reagentButton2.icon.height
          }
          ColorOverlay {
                 anchors.fill: menuButtonIcon
                 source: menuButtonIcon
                 color: rootBgColor // this is white
             }

produces:

That's a really useful component; IMO it deserves mention in the Image documentation.

This is going to save us a lot of work...thanks!

fcarney

@mzimmers said in formatting .svg files?:

IMO it deserves mention in the Image documentation.

Look in the Graphical Effects part of QML docs. Lots of neat toys in there.
I wanted a crosshair that showed up regardless of background color. I was able to do this with some graphical effects. It basically took the original image area under crosshair and convert it to be a contrast value. Its almost like a photo negative effect.