SVG Graphics - Tutorial Part 7

My Menu Main Page Downloads Links News Search Engines Documentation About this Site Privacy Accessibility Site Map E-Mail Me

Doing the SVG: Making a Square Look Cool Let's start with designing in SVG. If you haven't already done so, download the SVG Plug-in for your Browser and open a simple text-editor, such a Notepad. We will not be using any graphics programmes. Let's draw a rectangle. We will create two XHTML files. Copy the above text for embedding SVG Graphics into an XHTML document, into your text editor and delete the line numbers their dots and space which follow and save it as SVG.HTML. Next, copy the above text for the standalone SVG Graphic into the text editor on a new page, again removing the line numbers, dots and space and save as RECT.SVG. Your standalone page (RECT.SVG) page should now look like <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="300" height="300" x="0" y="0"< <!--Your SVG content goes here --> </svg> In the standalone file, now saved as RECT.SVG, replace the line:- <!--Your SVG content goes here --> with <rect x="80" y="53" width="189" height="52" /> and save (retaining the file name "RECT.SVG"). Both SVG.HTML and RECT.SVG files should be in the same directory. Now, open the SVG.HTML file in your SVG Enabled browser and you should see a rectangle. Click here to see what it should look like. If this example does not open in a new window, simply download and save the file with a .svg extension, and then open it. Save it from here rect.svg If it doesn't, check your coding for input errors - it must look exactly the same as the example. Because SVG Graphics are open source, you can right click the SVG image embedded in this page, to also check your coding. Also check to see that you have the correct file name for RECT.SVG, and have not mixed up upper and lower case lettering.