SVG Toolbar Icons - Gradients Missing

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.

MSP_Greg

@placidfury said:

or manually edit the SVG code so SketchUp will read it properly

Well, SVG is XML and Nokogiri would certainly be up to the task. Wouldn't even need SketchUp to do the processing...

Greg