SVG Help

Discussion in 'Web Design and Development' started by wrldwzrd89, Oct 17, 2007.

  1. wrldwzrd89 macrumors G5

    wrldwzrd89

    Joined:
    Jun 6, 2003
    Location:
    Solon, OH
    #1
    I've been fooling around with gradients but can't seem to produce the effect I want. I'm trying to make a vector version of a bitmap graphic.

    The image on the bottom is the image I'm trying to reproduce as an SVG. The image on top is what my current attempt looks like.

    Here's the SVG source:
    Code:
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
      "[URL]http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd[/URL]">
    <svg width="32px" height="32px" xmlns="[URL]http://www.w3.org/2000/svg[/URL]" version="1.0">
    <defs>
    <linearGradient id="top" x1="0%" x2="0%" y1="0%" y2="100%">
    <stop offset="0%" stop-color="rgb(0,0,0)" />
    <stop offset="100%" stop-color="rgb(255,255,255)" />
    </linearGradient>
    <linearGradient id="left" x1="0%" x2="100%" y1="0%" y2="0%">
    <stop offset="0%" stop-color="rgb(255,255,255)" />
    <stop offset="100%" stop-color="rgb(0,0,0)" />
    </linearGradient>
    <linearGradient id="bottom" x1="0%" x2="0%" y1="100%" y2="0%">
    <stop offset="0%" stop-color="rgb(255,255,255)" />
    <stop offset="100%" stop-color="rgb(0,0,0)" />
    </linearGradient>
    <linearGradient id="right" x1="100%" x2="0%" y1="0%" y2="0%">
    <stop offset="0%" stop-color="rgb(255,255,255)" />
    <stop offset="100%" stop-color="rgb(0,0,0)" />
    </linearGradient>
    </defs>
    <polygon fill="url(#top)" stroke="none" points="0,0 15,15 15,16 0,31" />
    <polygon fill="url(#left)" stroke="none" points="0,0 15,15 16,15 31,0" />
    <polygon fill="url(#right)" stroke="none" points="0,31 15,16 16,16 31,31" />
    <polygon fill="url(#bottom)" stroke="none" points="31,0 16,15 16,16 31,31" />
    </svg>
     
  2. Super Macho Man macrumors 6502a

    Super Macho Man

    Joined:
    Jul 24, 2006
    Location:
    Hollywood, CA
    #2
    You just have the gradient IDs mixed up... and the "top" poly should be swapped with the "bottom" poly. Try this:

    Code:
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg width="32px" height="32px" xmlns="http://www.w3.org/2000/svg" version="1.0">
    <defs>
    <linearGradient id="bottom" x1="0%" x2="0%" y1="0%" y2="100%">
    <stop offset="0%" stop-color="rgb(0,0,0)" />
    <stop offset="100%" stop-color="rgb(255,255,255)" />
    </linearGradient>
    <linearGradient id="left" x1="0%" x2="100%" y1="0%" y2="0%">
    <stop offset="0%" stop-color="rgb(255,255,255)" />
    <stop offset="100%" stop-color="rgb(0,0,0)" />
    </linearGradient>
    <linearGradient id="top" x1="0%" x2="0%" y1="100%" y2="0%">
    <stop offset="0%" stop-color="rgb(0,0,0)" />
    <stop offset="100%" stop-color="rgb(255,255,255)" />
    </linearGradient>
    <linearGradient id="right" x1="100%" x2="0%" y1="0%" y2="0%">
    <stop offset="0%" stop-color="rgb(255,255,255)" />
    <stop offset="100%" stop-color="rgb(0,0,0)" />
    </linearGradient>
    </defs>
    <polygon fill="url(#left)" stroke="none" points="0,0 15,15 15,16 0,31" />
    <polygon fill="url(#top)" stroke="none" points="0,0 15,15 16,15 31,0" />
    <polygon fill="url(#bottom)" stroke="none" points="0,31 15,16 16,16 31,31" />
    <polygon fill="url(#right)" stroke="none" points="31,0 16,15 16,16 31,31" />
    </svg>
    When I view it I get a 1px dot in the center, not sure why.
     
  3. wrldwzrd89 thread starter macrumors G5

    wrldwzrd89

    Joined:
    Jun 6, 2003
    Location:
    Solon, OH
    #3
    That worked - I added a 1px black rectangle in the middle to fill the 1px dot.:D
     
  4. Stampyhead macrumors 68020

    Stampyhead

    Joined:
    Sep 3, 2004
    Location:
    London, UK
    #4
    Actually I think your first attempt looks way cooler than the one you were trying to copy.
    Glad you got it working, though. How is browser support for SVG images? Last I heard it was spotty at best, but I haven't been keeping up with it.
     
  5. wrldwzrd89 thread starter macrumors G5

    wrldwzrd89

    Joined:
    Jun 6, 2003
    Location:
    Solon, OH
    #5
    Firefox's support is decent. Opera's is excellent. Safari 2's is none. Safari 3's is decent. Not that it matters much, as these SVGs I am making won't be used in a browser environment.
     

Share This Page