Scalable Vector Graphics (SVG) Interview Preparation Guide

Download PDF

Scalable Vector Graphics (SVG) is a new graphics file format and Web development language based on XML. SVG enables Web developers and designers to create dynamically generated, high-quality graphics from real-time data with precise structural and visual control.

SVG (Scalable Vector Graphics) is a format which is recomended by the W3C for the description of vector graphics, especially for the use in Web pages. In order to view a page with included SVG objects, you must install a plugin for your webbrowser. You can get one for free from http://www.adobe.com/svg/. There are plugins available for many webbrowsers.

SVG-VML-3D is a free JavaScript library which can be used to draw and manipulate 3D objects in html pages by using SVG or VML. The JavaScript code which has to be typed into the html page to define the Scene (3D Objects, Viewer Position, Light, ...) is the same for SVG and VML. If the browser is IE, then automatically VML will be used, otherwise SVG will be used.

One pic is more than 1000 words, so have a look at this examples by clicking on the pictures. Make sure, you use Internet Explorer or have installed a SVG plugin for your browser. For a first impression, how easy it is to display 3D objects using this library, have a look at the source code of the respective html files. The file svgvml3d.js is the core of the library and must always be included. If you want to use a 3D chart, then the file boundingbox.js must be included. Additionally, you can define your own classes for specific 3D objects. The objects, which are defined in the files platonic.js and colorbox3d.js are only used in their specific context. Have a look at those 2 files, to see how you can define your own objects for the use with this library.

Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics.

SVG files are compact and provide high-quality graphics on the Web, in print, and on resource-limited handled devices. In addition, SVG supports scripting and animation, so is ideal for interactive, data-driven, personalized graphics.

SVG is a royalty-free vendor-neutral open standard developed under the W3C (World Wide Web Consortium) Process.

Adobe has taken a leadership role in the development of the SVG specification and continues to ensure that its authoring tools are SVG compatible.

It doesn't look like SVG will do any line-breaking. If you want line-breaking of text, then embed some XHTML or other CSS-formatted or XSL-formatted XML within <foreignobject>.

My best guess is that the answer will be 'yes' but I'm still doing my homework. I believe an SVG processor, just like a CSS processor, should take advantage of any intelligence built into a font.

Note that SVG will provide an 'altglyph' facility so that authoring products can precisely control which glyphs are used and thus override any automatic font features.

Don't think current W3C standards such as CSS address this issue directly and I'm not aware of any relevant de facto standards.

Adobe is aware of the desire to post Type1 Web fonts and is working through solutions. Stay tuned.

You can provide a 'hint' about what type format a given font is, but I'm not sure that all implementations will do what you want and (for example) only use the Type1 font.

I think Web fonts are the way to go if you want to ensure that the correct font is used. System fonts have their place, too, but probably should be avoided if you have precise text needs.

This was one of the requirements from the SVG Requirements document. Somehow or other this will be possible.