Hello,
back in issue #27 I was trying to update the YouTube webicon.
We have a couple internal WebIcons at our museum that I want to add to the webicon library (but probably wouldn't get used much by anyone else, but who knows?) -- ArtBabble, our blog, and a couple other little apps or external sites that are fairly specific to museum world stuff.
That issue got closed, but Adam you recommended opening a new issue if I ran into this again. So... here I am. I came up with steps to make my own .svgs work, but I'm curious if there's some setting I'm missing in Illustrator that will have these work by default, rather than having to reopen them in a text editor to fix?
Can you please let me know what it is I'm doing in saving out .svg from Illustrator CC that's busting these things, or what I need to alter in the svg code to make them work?
I'm reposting my steps here from #27 to make it easier to deal with.
I create the vector art in Illustrator CC. I open one of the working webicons up and...
- Copied/pasted vector shapes from my art into webicon svg
- resized / edited shapes to match the existing webicon background art height and shape, exactly.
- expanded all compound shapes, edited transparent vectors to be solid
- Saved as SVG
- Set the options to the following:
SVG Profile 1.1
Subsetting: none
Image location: link
CSS Properties: Presentation Attributes (default)
Decimal Places: 3 (default)
... actually everything else was default.
When it displays with the .medium class, the background is blank.
When I open the .svg file in a text editor, I see that there's some extra stuff, like a width and height setting in the tag, a tag wrapping the gradients and such. Doing the following fixes the svg and makes it work.
- Edited the svg tag to remove the width and height attributes.
- Added fill-rule="evenodd" clip-rule="evenodd" to the path tags.
That fixes it and makes it work.
Hello,
back in issue #27 I was trying to update the YouTube webicon.
We have a couple internal WebIcons at our museum that I want to add to the webicon library (but probably wouldn't get used much by anyone else, but who knows?) -- ArtBabble, our blog, and a couple other little apps or external sites that are fairly specific to museum world stuff.
That issue got closed, but Adam you recommended opening a new issue if I ran into this again. So... here I am. I came up with steps to make my own .svgs work, but I'm curious if there's some setting I'm missing in Illustrator that will have these work by default, rather than having to reopen them in a text editor to fix?
Can you please let me know what it is I'm doing in saving out .svg from Illustrator CC that's busting these things, or what I need to alter in the svg code to make them work?
I'm reposting my steps here from #27 to make it easier to deal with.
I create the vector art in Illustrator CC. I open one of the working webicons up and...
SVG Profile 1.1
Subsetting: none
Image location: link
CSS Properties: Presentation Attributes (default)
Decimal Places: 3 (default)
... actually everything else was default.
When it displays with the .medium class, the background is blank.
When I open the .svg file in a text editor, I see that there's some extra stuff, like a width and height setting in the tag, a tag wrapping the gradients and such. Doing the following fixes the svg and makes it work.
That fixes it and makes it work.