Images - Svg

  • 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

        svg save
      • 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