SVG Help

[wrldwzrd89]

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:

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

 

[Super Macho Man]

You just have the gradient IDs mixed up... and the "top" poly should be swapped with the "bottom" poly. Try this:

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

 

[wrldwzrd89]

You just have the gradient IDs mixed up... and the "top" poly should be swapped with the "bottom" poly. Try this:

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

That worked - I added a 1px black rectangle in the middle to fill the 1px dot.

 

[Stampyhead]

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.

 

[wrldwzrd89]

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.

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.