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? AI CC rendered icons not displaying properly... #27

Closed wlanni closed 10 years ago

wlanni commented 10 years ago

Hello,

I'm trying to swap out the YouTube icon for the YouTube red square background/white playbutton.

These icons are used in a Zurb Foundation 4 site. You can see the defaults working just fine here: http://www.getty.edu/visit

I can't post the busted one, as I don't have a publicly available dev area, but I posted the svg code below if you want to swap out an existing webicon and give it a spin.

I downloaded the vector art from YouTube. I opened the fc-webicon-youtube.svg and started there:

  1. Copied/pasted vector shapes from YouTube 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. When I remove those, the icon resizes down too small, and begins to repeat. I also noticed that the SVG code AI spits out doesn't match the other webicons, so... curious if this is the new Adobe Illustrator screwing things up?

If I go into FireBug or Developer Tools and set the background-size: 100%; to have an !Important tag, it works (and none of the other webicons break). Weird.

I've attached the svg code here.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="612px" height="792px" viewBox="0 0 612 792" enable-background="new 0 0 612 792" xml:space="preserve">
<g>

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="25.8431" y1="-0.1843" x2="25.8431" y2="47.8705" gradientTransform="matrix(12.75 0 0 12.75 -23.5 92)">
        <stop  offset="0" style="stop-color:#E42C26"/>
        <stop  offset="1" style="stop-color:#B41217"/>
    </linearGradient>
    <path fill="url(#SVGID_1_)" d="M612.349,625.763c0,42.289-34.298,76.587-76.587,76.587H76.238
        c-42.289,0-76.587-34.298-76.587-76.587V166.238c0-42.289,34.298-76.587,76.587-76.587h459.524
        c42.289,0,76.587,34.298,76.587,76.587L612.349,625.763L612.349,625.763z"/>
    <path fill="#841818" d="M493.928,512.853c-15.711,16.46-33.327,16.54-41.402,17.504c-57.822,4.179-144.653,4.309-144.653,4.309
        s-107.434-0.982-140.491-4.152c-9.195-1.726-29.843-1.201-45.563-17.661c-12.389-12.541-16.42-41.017-16.42-41.017
        s-4.134-33.439-4.134-66.874v6.007c0,33.435,4.134,66.874,4.134,66.874s4.031,28.476,16.42,41.017
        c15.72,16.46,36.368,15.935,45.563,17.661c33.059,3.17,140.491,4.152,140.491,4.152s86.831-0.13,144.653-4.309
        c8.075-0.964,25.691-1.044,41.402-17.504c12.388-12.541,16.428-41.017,16.428-41.017s4.125-33.439,4.125-66.874v-6.007
        c0,33.435-4.125,66.874-4.125,66.874S506.316,500.312,493.928,512.853z"/>
    <path fill="#FFFFFF" d="M510.357,306.734c0,0-4.04-28.476-16.428-41.017c-15.711-16.455-33.327-16.536-41.402-17.5
        c-57.822-4.183-144.563-4.183-144.563-4.183h-0.179c0,0-86.737,0-144.563,4.183c-8.075,0.964-25.683,1.045-41.402,17.5
        c-12.389,12.541-16.42,41.017-16.42,41.017s-4.134,33.439-4.134,66.878v31.35c0,33.435,4.134,66.874,4.134,66.874
        s4.031,28.475,16.42,41.017c15.72,16.46,36.367,15.935,45.563,17.661c33.059,3.17,140.491,4.152,140.491,4.152
        s86.831-0.13,144.653-4.309c8.075-0.964,25.691-1.044,41.402-17.504c12.388-12.541,16.428-41.017,16.428-41.017
        s4.125-33.439,4.125-66.874v-31.35C514.482,340.173,510.357,306.734,510.357,306.734z"/>

        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="27.0215" y1="-0.1843" x2="27.0215" y2="47.8706" gradientTransform="matrix(12.75 0 0 12.75 -23.5 92)">
        <stop  offset="0" style="stop-color:#E42C26"/>
        <stop  offset="1" style="stop-color:#B41217"/>
    </linearGradient>
    <polygon fill="url(#SVGID_2_)" points="265.215,442.948 376.85,385.1 265.197,326.848     "/>
    <path id="The_Sharpness_1_" fill="#841818" d="M265.197,326.848l97.915,65.381l13.738-7.129L265.197,326.848z"/>
</g>
</svg>
wlanni commented 10 years ago

OK, I cropped down the crop area in Illustrator to perfectly wrap the graphic, which is a 612px x 612px (matching the original youtube webicon art).

Saved out using all the options above.

Didn't work.

Edited the svg tag to remove the width and height attributes.

Added fill-rule="evenodd" clip-rule="evenodd" to the path tags.

Now it works. Altered code now looks like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 89.651 612 612.699" enable-background="new 0 89.651 612 612.699"
     xml:space="preserve">

        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="25.8431" y1="-0.1843" x2="25.8431" y2="47.8705" gradientTransform="matrix(12.75 0 0 12.75 -23.5 92)">
        <stop  offset="0" style="stop-color:#E42C26"/>
        <stop  offset="1" style="stop-color:#B41217"/>
    </linearGradient>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="url(#SVGID_1_)" d="M612.349,625.763c0,42.289-34.298,76.587-76.587,76.587H76.238
        c-42.289,0-76.587-34.298-76.587-76.587V166.238c0-42.289,34.298-76.587,76.587-76.587h459.524
        c42.289,0,76.587,34.298,76.587,76.587L612.349,625.763L612.349,625.763z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#841818" d="M493.928,512.853c-15.711,16.46-33.327,16.54-41.402,17.504c-57.822,4.179-144.653,4.309-144.653,4.309
        s-107.434-0.982-140.491-4.152c-9.195-1.726-29.843-1.201-45.563-17.661c-12.389-12.541-16.42-41.017-16.42-41.017
        s-4.134-33.439-4.134-66.874v6.007c0,33.435,4.134,66.874,4.134,66.874s4.031,28.476,16.42,41.017
        c15.72,16.46,36.368,15.935,45.563,17.661c33.059,3.17,140.491,4.152,140.491,4.152s86.831-0.13,144.653-4.309
        c8.075-0.964,25.691-1.044,41.402-17.504c12.388-12.541,16.428-41.017,16.428-41.017s4.125-33.439,4.125-66.874v-6.007
        c0,33.435-4.125,66.874-4.125,66.874S506.316,500.312,493.928,512.853z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" d="M510.357,306.734c0,0-4.04-28.476-16.428-41.017c-15.711-16.455-33.327-16.536-41.402-17.5
        c-57.822-4.183-144.563-4.183-144.563-4.183h-0.179c0,0-86.737,0-144.563,4.183c-8.075,0.964-25.683,1.045-41.402,17.5
        c-12.389,12.541-16.42,41.017-16.42,41.017s-4.134,33.439-4.134,66.878v31.35c0,33.435,4.134,66.874,4.134,66.874
        s4.031,28.475,16.42,41.017c15.72,16.46,36.367,15.935,45.563,17.661c33.059,3.17,140.491,4.152,140.491,4.152
        s86.831-0.13,144.653-4.309c8.075-0.964,25.691-1.044,41.402-17.504c12.388-12.541,16.428-41.017,16.428-41.017
        s4.125-33.439,4.125-66.874v-31.35C514.482,340.173,510.357,306.734,510.357,306.734z"/>

        <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="27.0215" y1="-0.1843" x2="27.0215" y2="47.8706" gradientTransform="matrix(12.75 0 0 12.75 -23.5 92)">
        <stop  offset="0" style="stop-color:#E42C26"/>
        <stop  offset="1" style="stop-color:#B41217"/>
    </linearGradient>
    <polygon fill="url(#SVGID_2_)" points="265.215,442.948 376.85,385.1 265.197,326.848     "/>
    <path fill-rule="evenodd" clip-rule="evenodd" id="The_Sharpness_1_" fill="#841818" d="M265.197,326.848l97.915,65.381l13.738-7.129L265.197,326.848z"/>
</svg>

I'm still confused as to the save-as settings in Illustrator, what am I missing? Glad to know that all I had to do was remove the width and height, and add the fill-rule="evenodd" clip-rule="evenodd" to the path tags, and I hope that helps anyone else trying to work this out. But if someone knows how to force Illustrator to export these correctly, I'd love to know.

wlanni commented 10 years ago

By the way, you can see the new YouTube webicon in action up on the Getty's website, at the bottom of the Visit page, and in the Connect with Us page (which includes some custom webicons I made for our blog, and a couple other sites):

http://www.getty.edu/visit

adamfairhead commented 10 years ago

Hi @wlanni, apologies for the delayed reply. Been super-busy this last few months. I've updated the YouTube icon in the repository. Open up another issue here if you still need SVG assistance - I'll be happy to help you out. :+1: