SVG Toolbar Icons - Gradients Missing

SVG Toolbar Icons - Gradients Missing

Postby placidfury » Wed Mar 14, 2018 7:37 pm

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.
0
User avatar
placidfury 
 

Re: SVG Toolbar Icons - Gradients Missing

Postby Rich O Brien » Wed Mar 14, 2018 8:43 pm

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

Is the gradient displaying?

IF you clean the SVG here...

https://jakearchibald.github.io/svgomg/

...does it work?
0
There's a frontroom and a backroom....reverse faces
User avatar
Rich O Brien 
Administrator
 

Re: SVG Toolbar Icons - Gradients Missing

Postby placidfury » Wed Mar 14, 2018 8:53 pm

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.
0
User avatar
placidfury 
 

Re: SVG Toolbar Icons - Gradients Missing

Postby Rich O Brien » Wed Mar 14, 2018 9:20 pm

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
0
There's a frontroom and a backroom....reverse faces
User avatar
Rich O Brien 
Administrator
 

Re: SVG Toolbar Icons - Gradients Missing

Postby placidfury » Wed Mar 14, 2018 9:40 pm

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.
0
User avatar
placidfury 
 

Re: SVG Toolbar Icons - Gradients Missing

Postby Rich O Brien » Wed Mar 14, 2018 9:46 pm

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?
0
There's a frontroom and a backroom....reverse faces
User avatar
Rich O Brien 
Administrator
 

Re: SVG Toolbar Icons - Gradients Missing

Postby placidfury » Wed Mar 14, 2018 10:03 pm

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.
0
User avatar
placidfury 
 

Re: SVG Toolbar Icons - Gradients Missing

Postby Rich O Brien » Wed Mar 14, 2018 10:24 pm

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.
0
There's a frontroom and a backroom....reverse faces
User avatar
Rich O Brien 
Administrator
 

Re: SVG Toolbar Icons - Gradients Missing

Postby placidfury » Wed Mar 14, 2018 10:36 pm

See attached - thanks for looking!
0
User avatar
placidfury 
 

Re: SVG Toolbar Icons - Gradients Missing

Postby Rich O Brien » Wed Mar 14, 2018 10:45 pm

Share the SketchUp icon too.

Did you try using the SketchUp icon as your icon to see if it loads with the gradient?
0
There's a frontroom and a backroom....reverse faces
User avatar
Rich O Brien 
Administrator
 

Re: SVG Toolbar Icons - Gradients Missing

Postby placidfury » Wed Mar 14, 2018 10:48 pm

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.
0
User avatar
placidfury 
 

Re: SVG Toolbar Icons - Gradients Missing

Postby Rich O Brien » Wed Mar 14, 2018 11:12 pm

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

Code: Select all
<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...

Code: Select all
<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.
0
There's a frontroom and a backroom....reverse faces
User avatar
Rich O Brien 
Administrator
 

Re: SVG Toolbar Icons - Gradients Missing

Postby placidfury » Thu Mar 15, 2018 1:03 am

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

Code: Select all
<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?
0
User avatar
placidfury 
 

Re: SVG Toolbar Icons - Gradients Missing

Postby Rich O Brien » Thu Mar 15, 2018 11:03 am

Sketch but it is Mac only.
0
There's a frontroom and a backroom....reverse faces
User avatar
Rich O Brien 
Administrator
 

Re: SVG Toolbar Icons - Gradients Missing

Postby TIG » Thu Mar 15, 2018 6:21 pm

Have you looked at post-processing like this:
https://jakearchibald.github.io/svgomg/
0
TIG
User avatar
TIG 
Global Moderator
 

Re: SVG Toolbar Icons - Gradients Missing

Postby Rich O Brien » Thu Mar 15, 2018 6:24 pm

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.
0
There's a frontroom and a backroom....reverse faces
User avatar
Rich O Brien 
Administrator
 

Re: SVG Toolbar Icons - Gradients Missing

Postby placidfury » Thu Mar 15, 2018 10:34 pm

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.
0
User avatar
placidfury 
 

Re: SVG Toolbar Icons - Gradients Missing

Postby placidfury » Thu Mar 15, 2018 10:37 pm

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.
0
User avatar
placidfury 
 

Re: SVG Toolbar Icons - Gradients Missing

Postby Dan Rathbun » Fri Mar 16, 2018 3:05 pm

What about another editor like GIMP ?
0
    I'm not here much anymore. But a PM will fire email notifications.
    User avatar
    Dan Rathbun 
    PluginStore Author
    PluginStore Author
     

    Re: SVG Toolbar Icons - Gradients Missing

    Postby placidfury » Fri Mar 16, 2018 5:27 pm

    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.
    0
    User avatar
    placidfury 
     

    Re: SVG Toolbar Icons - Gradients Missing

    Postby MSP_Greg » Sat Mar 17, 2018 1:05 am

    placidfury wrote: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
    0

    MSP_Greg 
     

    SketchUcation One-Liner Adverts

    by Ad Machine » 5 minutes ago



    Ad Machine 
    Robot
     



     

    Return to Developers' Forum

    Who is online

    Users browsing this forum: lumaskp and 3 guests

    Visit our sponsors: