• Home
• SVG Home

• With CSS

• Straight Lines
• Count The Black Dots
• Which Circle Is Bigger?

• Sans CSS

• Straight Lines
• Count The Black Dots
• Which Circle Is Bigger?

Net Centric Software

Scalable Vector Graphics

I have been intrigued by SVG since I first read about it. Now that FireFox has native support for SVG, I though it was a good time to learn it.

There was inspiration for using optical illusions as the learning vehicle.

Caution: The SVG pages will only function in a modern browser that supports SVG natively. This is initial development of a new skill set and so I am not yet attempting to create a cross-browser, highly accessible SVG site.

Style Sheets

Getting a handle on basic, DOM-scripted, SVG went smoothly enough. So I decided to kick it up a notch and put some CSS on the pages. The With CSS SVG pages are an attempt to make the pages look like the rest of this site. The Sans CSS were the first-generation and the pages have no elements besides the SVG. The black dots illusion seems stronger in the page without style sheets.

DOM Scriting

Being a lazy programmer, the thought of hard-coding all of the xmlns:svg elements to create the illusions was too onerous. Gratefully, DOM-scripting is available.

On the SVG pages, try re-sizing the window. The text should automatically re-scale. Not sure how useful it is as a feature, but it was a good DOM-scripting exercise.

Serving up SVG

Not surprisingly, SVG files have a .svg extension. Unfortunately, my hosting service does not seem to be configured for this. So for now, the pages are served as .xml files with the SVG parts defined in their own namespace.