SVG

  Home  Applications Programs  SVG


“Learn SVG by our SVG Interview Questions and Answers. Scalable Vector Graphics (SVG) is a family of specifications of XML-based file format for describing two-dimensional vector graphics, both static and dynamic (interactive or animated). Get preparation for Scalable Vector Graphics (SVG) Jobs by our Scalable Vector Graphics (SVG) Interview Questions and Answers”



35 SVG Questions And Answers

1⟩ What is SVG and what is VML ?

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.

 246 views

2⟩ What is SVG?

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.

 219 views

3⟩ If a font contains kerning and ligature info, does an SVG renderer apply these transformations?

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.

 234 views

5⟩ What can we do with this SVG library?

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.

 206 views

6⟩ Explore the possibilities of SVG?

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.

 212 views

7⟩ What is SVG-VML-3D ?

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.

 209 views

8⟩ What are available filters in SVG?

The available filters in SVG are:

* feBlend

* feColorMatrix

* feComponentTransfer

* feComposite

* feConvolveMatrix

* feDiffuseLighting

* feDisplacementMap

* feFlood

* feGaussianBlur

* feImage

* feMerge

* feMorphology

* feOffset

* feSpecularLighting

* feTile

* feTurbulence

* feDistantLight

* fePointLight

* feSpotLight

 220 views

9⟩ List the advantages of SVG?

★ SVG files can be handled by various tools.

★ SVG files are smaller and more compressible that other formats like JPEG, GIF.

★ SVG images produce high quality prints irrespective of resolution.

★ SGV images are zoomable, without degradation.

★ Text can be selected in SVG images.

★ Text in SVG images is searchable.

 219 views

10⟩ What are the SVG Gradients?

A gradient is a smooth transition from one color to another. In addition, several color transitions can be applied to the same element.

There are two main types of gradients in SVG:

* Linear Gradients

* Radial Gradients

 226 views

11⟩ Why to use SVG?

★ It is high-end 2D graphics using XML tags.

★ It uses XML as plain vanilla text.

★ SVG images are scalable.

★ CSS can be applied to SVG.

★ It is a W3C recommendation standard.

★ Exclusive technology to handle exclusively vector graphics.

 222 views

13⟩ What are predefined shapes in SVG?

SVG has some predefined shape elements that can be used and manipulated by developers:

* Rectangle <rect>

* Circle <circle>

* Ellipse <ellipse>

* Line <line>

* Polyline <polyline>

* Polygon <polygon>

* Path <path>

 235 views

14⟩ What are the predefined shapes in SVG?

SVG has some predefined shape elements that can be used and manipulated by developers:

* Rectangle <rect>

* Circle <circle>

* Ellipse <ellipse>

* Line <line>

* Polyline <polyline>

* Polygon <polygon>

* Path <path>

 220 views

15⟩ How does one specify a precise font in any other way than by downloading? In particular, how would an SVG document specify the difference between Adobe Times (in Type1 format, say), and Monotype Times (in TrueType format, say)?

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.

 263 views

17⟩ How you can specify a border to a rectangle?

Following is the code snippet for drawing a rectangle:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<rect width="400" height="200" />

</svg>

The style attribute is specified in the <rect> tag to specify the border color. This is illustrated in the following code snippet:

<rect width="400" height="200" style="fill:rgb(0,0,255);stroke-width:1;

stroke:rgb(0,0,0)"/>

The property 'fill' defines the color to fill the rectangle.

The property 'stroke-width' defines the width of the border of the rectangle.

 219 views

18⟩ List the example for SVG file?

Following code snippet is an example that draws a circle.

★ SVG code always starts with <svg> tag.

★ <?xml version="1.0" standalone="no"?>

★ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

★ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

★ <svg width="100%" height="100%" version="1.1"

★ xmlns="http://www.w3.org/2000/svg">

★ <circle cx="200" cy="100" r="50" stroke="blue" stroke-width="2" fill="yellow"/>

★ </svg>

 230 views

19⟩ How you can perform embed SVG in HTML?

★ SVG files are embedded into HTML documents by using <embed> , <object> and <iframe> tags.

★ The <embed> tag is supported for all major browsers.

★ The <embed> tag supports scripting.

★ Adobe SVG view recommends to use the EMBED tag while embedding in HTML page.

★ Note that the tag name is capitalized.

Following is an example for <embed> tag:

<embed src="rectangle.svg" height="100" width="300" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" >

 235 views

20⟩ How to create a circle with the use of <circle> tag?

The <circle> tag is used for creating circles.

The tag requires the x and y coordinates as center point of the circle and radius of the circle.

Following is the example to draw a circle:

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"

xmlns="http://www.w3.org/2000/svg">

<circle cx="200" cy="100" r="50" stroke="black"

stroke-width="2" fill="blue"/>

</svg>

The circle's center point is at (200,100) coordinate and the radius is 50.

The 'stroke' attribute draws the border of the circle with 2 as width.

The circle is filled with blue, as the 'fill' attribute is assigned with color blue.

 208 views