SVG formatting for inclusion in custom icon set

[Andrew Graunke]

We’ve created a vector image in Illustrator & exported as an SVG file (https://dl.dropboxusercontent.com/u/98692823/bills_square.svg), but when we attempt to use it in a custom icon set (e.g. cora-iconset-svg), the sizing does not work as expected.

You can see the issue here - http://jsbin.com/xuqijurata/7/edit  I have one of the icons from the core-iconset-svg demo to the left & my custom icon with a red border. You can see a black dot at the top of the border box, which is some portion of my icon. If I remove the “viewBox” in my icon’s core-iconset-svg definition in the demo then more of it appears, but at a larger than expected size. I assume the viewBox created by Illustrator is the issue, but not sure how to avoid it since it is automatically created on SVG export. 

Does the Polymer team have any guidance on SVG creation?

[Derick]

In the example you provided: remove the viewBox attribute in the svg tag and increase the iconSize attribute in core-iconset-svg to around 300 (this is what you were missing). This will get the image to display. You may also want to remove the fill attribute in path and use CSS to set the color of the image as necessary. Additionally, the alignment will not be perfect so you'd have to pay some attention to the margins that you set on this particular icon.

regards,

derick 

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/ead47995-b972-40ca-a967-8f31c268e3c5%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.