SVG Toolbar Icons - Gradients Missing

placidfury

I'm trying to convert my PNG toolbar icons for my plugin to SVG. I have looked at existing and fully working SVG icon files (such as the ones in the advanced camera tools, and others). For some reason, though, even when using one of those files as a template, SketchUp is not rendering gradient fills when it draws the icons. When I do a solid fill, it works, but when I switch to a gradient, it disappears. Does anyone know how to solve this?

If it matters, I am using Inkscape 0.92.2 to create the SVG files.

Gradients work fine for some of the stock SVG's, as a for instance, look at the "Smoove" icon file - it has 18 gradient fills and they all work fine on the toolbar.

Rich O Brien

What do you see if you load the SVG icons into a browser?

Is the gradient displaying?

IF you clean the SVG here...

SVGOMG - SVGO's Missing GUI

Easy & visual compression of SVG images.

(jakearchibald.github.io)

...does it work?

placidfury

So, it loads fine in both Opera and Chrome and appears as expected with the gradient. I ran it through the link you posted, and it again appears fine in browsers.
In SketchUp, it made no difference. It drops the gradient out, only shows the line-work, and the fill appears to be transparent.

Rich O Brien

Did you try to convert them to PDF?

Fredo uses PDF for vector icons.

Failing that you could try separating the fill and stroke...

placid.zip

placidfury

I'm in Windows, so I can only use SVG, no? My understanding is PDF is for OSX... am I wrong?

Anyway, I tried the file you sent, and it only showed the line-work. See the attached screenshot - it only showed the outline of the box.

No Fill

Rich O Brien

I've not tried gradient fills for icons. In WrapR we use flat colors so maybe it is not possible?

Did you examine the code of the Advanced Camera icons to see hoe they manage to use gradients?

placidfury

I opened the advance camera tools and sandbox tools SVG's by opening in Inkscape, and I can't for the life of me spot anything special about the gradient fills in, for instance, the smoove tool icon, or the add camera icon. The only thing I obviously see (in Inkscape, anyway) is that the gradient names are negative numbers in the stock SVG's. Looking at the code of the SVG, there are substantial style differences between what Inkscape generated and what the stock files have - how to fix this, I don't know. I'm not an expert on the SVG file format.

Rich O Brien

Your best place to look is in the <svg>...</svg> tag code

Share an icon here and I can take a look. Inkscape and AI generate different SVG code on export.

placidfury

See attached - thanks for looking!

column.zip

Rich O Brien

Share the SketchUp icon too.

Did you try using the SketchUp icon as your icon to see if it loads with the gradient?

placidfury

Attached is the stock create camera SVG for comparison.

And yes, I tried using their SVG's and they work fine.

Added the smoove icon.

create_camera.zip

smoove.zip

Rich O Brien

The difference I can see is how the gradient is styled in Inkscape...

<defs
     id="defs6">
    <linearGradient
       inkscape;collect="always"
       id="linearGradient822">
      <stop
         style="stop-color;#ff00ff;stop-opacity;1;"
         offset="0"
         id="stop818" />
      <stop
         style="stop-color;#ffd2ff;stop-opacity;1"
         offset="1"
         id="stop820" />
    </linearGradient>
    <linearGradient
       inkscape;collect="always"
       xlink;href="#linearGradient822"
       id="linearGradient824"
       x1="11.999999"
       y1="23.593208"
       x2="11.999999"
       y2="0.42856112"
       gradientUnits="userSpaceOnUse" />
  </defs>

as compared to Sketch...

<defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
            <stop stop-color="#EAE7CA" offset="0%"></stop>
            <stop stop-color="#8C8A7B" offset="75.9797696%"></stop>
            <stop stop-color="#E7E4C5" offset="100%"></stop>
        </linearGradient>
    </defs>

Inkscape also introduces alot of additional code into the SVG file.

Try tweaking your gradient code to mimic the SketchUp code. Or ask someone with Sketch to save an SVG for you.

I know that in Inkscape there are various options when saving to SVG that cleans the code somewhat. Saving for print is different than saving for web.

placidfury

Confirmed - when I edited the SVG code to look like this:

<linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-1">
     <stop stop-color="#ff00ff" offset="0%"></stop>
     <stop stop-color="#ffd2ff" offset="100%"></stop>
</linearGradient>

then the gradient DID indeed show up.

So, anyone know of an app that will put the SVG code in a format SketchUp likes?

Rich O Brien

Sketch but it is Mac only.

TIG

Have you looked at post-processing like this:
https://jakearchibald.github.io/svgomg/

Rich O Brien

I pointed him to that earlier in the thread.

InkScape adds a lot of junk into the SVG code.

I suspect it’s the double linear gradient tags that are the problem.

OMGSVG doesn’t clean it sufficiently.

Still bizarre that SketchUp can’t read an SVG if the formatting is slightly different.

placidfury

Yeah, not sure what else to try. I guess I either stick with images or manually edit the SVG code so SketchUp will read it properly, for each icon. Which I have no desire to do, as I have 59 buttons as of now, so... yeah.

placidfury

For what it's worth, I think the problem with Inkscape is that it makes the gradient in two parts, and has the gradient units listed as "userSpaceOnUse", and I think SketchUp doesn't know what to do with that. SketchUp likes the X/Y portion to be formatted in percentages, not on-the-fly which the userSpaceOnUse implies.

Dan Rathbun

What about another editor like GIMP ?

placidfury

GIMP doesn't do vector graphics, no? It can import, but converts to raster. I tried a couple apps that work with SVG, to no avail - they all output different code in the SVG, and each one did different (incorrect) things when I tried to use them on my toolbar in SketchUp.