search

adamfairhead / webicons

Webicons is a set of resolution-independent social icons for use on your website. They use feature-detected SVG graphics (with PNG fallbacks) to display the icons over their appropriate negatively indented anchor titles.
531 stars 61 forks source link

How to Create New WebIcons? #35

Open wlanni opened 10 years ago

wlanni commented 10 years ago

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...

  1. Copied/pasted vector shapes from my art into webicon svg
  2. resized / edited shapes to match the existing webicon background art height and shape, exactly.
  3. expanded all compound shapes, edited transparent vectors to be solid
  4. Saved as SVG
  5. 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.

  1. Edited the svg tag to remove the width and height attributes.
  2. Added fill-rule="evenodd" clip-rule="evenodd" to the path tags.

That fixes it and makes it work.

wlanni commented 9 years ago

Hey, still hoping to get some feedback on how to correctly create a new icon so that I don't have to go back and edit the svg in a text editor. Not sure why my export from Illustrator CC doesn't quite work, is there a different tool you're using?