- Scalable Vector Graphics
- Advantages of using SVG over other image formats (like JPEG and GIF) are:
- SVG images can be created and edited with any text editor
- SVG images can be searched, indexed, scripted, and compressed
- SVG images are scalable
- SVG images can be printed with high quality at any resolution
- SVG images are zoomable (and the image can be zoomed without degradation)
- SVG is an open standard
- SVG files are pure XML
- Every element and every attribute in SVG files can be animated
- SVG is a W3C recommendation
- SVG integrates with other W3C standards such as the DOM and XSL
- Firefox, Internet Explorer 9, Google Chrome, Opera, and Safari support SVG.
- Can't be placed on an html page like other images...because it is an html page
- SVG graphics can be created with vector based programs like Illustrator...or with a text/html editor like Dreamweaver or even Notepad
- In Illustrator create artwork then when ready to save go to Save => Save As (not save for web - except in CS 5)
- Choose svg format
- Or you can hand code it in if you are patient:
http://psdp3.com/mgd141/svg/svgtest.html
(best viewed in Chrome) - look at the code
- You can also veiw the svg file online in it's native format:
http://psdp3.com/mgd141/svg/optima.svg - look at the code...you can edit in Dreamweaver and add other html elements
- or
- you can use the embed element to place on a regular html page:
(<embed class="optima" src="optima.svg" type="image/svg+xml" />)
http://psdp3.com/mgd141/svg/svgtest2.html - If you expand the size the browser you will see graphic expand and contract without loss of quality
- Why is the word optima written twice?
- In Illustrator the word Optima was typed out twice...the first was converted to "outline" and the other was kept as a font
- The font is actually read in the browser as html text...but there is a drawback
<text transform="matrix(1 0 0 1 12.1099 195.5029)" font-family="'Optima-Bold'" font-size="89.3325">OPTIMA</text> - Check in multiple browsers and you will discover the issue
- btw...Optima is a Mac only font
- Advantages of using SVG over other image formats (like JPEG and GIF) are: