Toolbar icon - SVG clipPath results in black background

Developers Ruby API
1

Are clip paths supported in SVG files used as toolbar icons?
Here is an example attached. It contains a clipPath. It is displayed correctly by browsers, Inkscape, Affinity Designer, etc. But in SketchUp as a toolbar icon, it has a black background.

Any idea why? Is there a workaround?

transmutr_icon.zip (4.2 KB)

2

The toolkit that SketchUp uses for its Windows UI supports only a subset of SVG:

  • no gradients (ouch!)
  • no filters (for smooth shadows)
  • no embedded images (as work-around for the previous limitations)
  • and no clip paths

By comparison, different PDF standard versions (PDF/A-1 1.4 vs. Adobe’s non-standard PDF) have also varying limitations compared to SVG. As a work-around, you could:

  • emulate the missing features (posterizing gradients to layered polygons of varying color, intersecting polygons instead of clip paths, embedding raster graphics; some of these can be done with extensions in the SVG editor)
  • render the vector graphic to a raster graphic
  • simplify the design to work with less SVG features (flat design instead of gradients etc.)
3 Likes
3

@jiminybillybob, try this optimised version…

optimised.svg.zip (4.3 KB)

john

4

@Aerilius Thanks for the explanation! I’ll try splitting the shapes to avoid using clip paths.

John, thanks for trying but the issue remains, as there’s still a clip path.

5

I’m having the same issue, I guess the easiest solution is converting to .png, since the toolbar icon size won’t change in any scenario. For me it’s ok working with a raster.

6

You could also “dumb down” the SVG to not use the advanced features, while still retain the crispness.

7

The recommended icons image size for extensions was once changed for having the infamous “padding” that the designers wanted but the developers could not implemented on the SketchUp side.

When you bake the icon to a png image, remember to make it 2Ă— the size because higher density displays are getting so common that I would consider it as reference.