Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Why is the SVG format so darn COOL?

Skill Building

Why is the SVG format so darn COOL?

by  Triska  Posted    (Edited  )

For Designers:
ò Well, for Illustrator designers, it's a great way to share our work online with others who have the plugin from Adobe, which is also installed by default with many Adobe products.
ò But my favorite feature is that, [color Red]you can Zoom in and Pan, which allows complex detail exploration. [/color]
ò SVGs are real text, searchable, have font embedding controls, and can be opened and edited in Illustrator as vector art.
What is SVG? From Adobe: http://www.adobe.com/svg/overview/svg.html
ò SVG stands for scaleable vector graphics, an amazing dynamic, web format, that incorporates XML based markup, a CSS parser, a full suite of SVG filters, javascript functionality, clipping paths, transparency, template based, data-driven graphics, and all the control over the object elements in Illustrator you could dream of.
ò JavaScript support on Internet Explorer for MAC is currently, seriously limited by browser naughtiness.

How do I author SVG with Illustrator?
The short answer is: Save As > SVG[
Long answer, Here's a PDF guide for AI9
http://www.adobe.com/svg/indepth/pdfs/illusag.pdf

Can I see some examples of SVG for inspiration?
http://www.adobe.com/svg/demos/main.html

A few tips for creating SVGs with Illustrator:
[ol]
[li]White space: An object up and left in relation to your art will force some margin whitespace around the SVG output, otherwise it crops tight.[/li]
[li]Headers: Toward this end, see the actions SVGZout MyWork & Others, for automated header placement. You will need to create an .ai or .svg header file and RErecord the 'Place' action to point to your new , personalized file. The SVGZout 'Others' action/file lets users know that the work being presented IS NOT MINE, and will keep designer relations on the up-and-up. [/li]
[li]Download all my TEK actions at: [color #2C5BBC](right-click, Save Target As, otherwise, you'll be reading script)[/color] http://www.elucidesign.com/TEK_examples/TEK_Actions.aia [/li]
See an example of the above header actions output: http://www.elucidesign.com/TEK_examples/FAQs/HeaderOutput.svgz
[li]Making a hyperlink <a href...> : Select an object and view the Attributes palette, URLs can be specified for the selected object here. By opening a non-compressed .svg file in a text editor, you can add target-"_blank" after the
Code:
"http://XXX.html"
to open your link in a new browser window.[/li]
[/ol]

Sef. 8/8/03
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top