My first SVG website

I recently discovered Scalable Vector Graphics, or SVG for short.  For the non-web-developers out there, SVG is a way to create shapes or images on a webpage without having to use jpgs or gifs.  SVG allows developers to describe these shapes mathematically; it is not unlike plotting points on a Cartesian coordinate system in math.  SVG can be infinitely complex, and thus is not restricted to only the most basic geometric shapes.

In my first attempt to use SVG, I designed a website that had a set of “blocks” arranged in a checkerboard pattern.  But something wasn’t right; despite the fact these blocks were placed side by side, there were odd “fringes” around some of the edges.  Thinking I had miscalculated my coordinates, I checked and doublechecked, to no avail.  I also noticed some fringes would disappear if I resized my browser window, while new fringes would appear.  Since I was also using a considerable amount of Cascading Style Sheets (CSS for short; it’s a method for placing and formatting elements on a webpage) for the first time as well, I just kept thinking I had made a mistake somewhere.

checkerSVG222 checkerSVGzoom

Left: example of the blocks. Right: a closeup showing the “fringes” between the squares.

Finally I realized what was happening.  Because I wanted the set of blocks to appear centered on the browser window, fractional differences were causing these fringes to appear.  Adjacent colors or the webpage’s background color would peek through “gaps” between the blocks.  If a browser window is 1000 pixels wide and the block set is 501 pixels wide, the browser can’t render half a pixel to center the blocks, and so “fringes” would appear as the browser tried to compensate.

The solution seemed obvious; SVG can be programmed to “stack” shapes in order (the “top” appearing “closest” to the viewer’s eye, for example).  All I needed to do was extend the edges of the shapes that were “underneath” others so there would be some overlap, which would at least prevent the background page color from showing through.  Alas, the extensions would peek around the perpendicular edges of the adjacent shapes “above” them.  I still had the same problem.

Finally, I hit upon the idea of using angled extensions; they wouldn’t show around the perpendicular edges of the blocks but would fill in the “gaps” between them.


The angled extensions eliminate nearly all the fringing between the blocks when they are overlapped.

There are probably other ways to solve this problem (such as a “resist-dyeing” method of stacking shapes), but I’ve already spent several days trying to solve this problem so this solution will do for now.  I’ll know next time to take into account that despite the fact SVG uses exact coordinates, browsers can’t always oblige them.

Here is the finished site!  There are still a few problems with gaps where shapes cannot be overlapped (such as the left side navigational buttons “Main”, “Music”, etc.).  I sure learned a lot about SVG and CSS, though, and feel much more confident in my ability to use both in the future!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: