SVG

Question 1

SVG

Answer 1

= Scalable Vector Graphics

An XML-based image format that describes graphics using geometrical attributes.

Question 2

What are SVG primitives?

Answer 2

Individual XML elements described using tags and attributes.

Question 3

SVG Stacking

Answer 3

The code order determines which element will appear over the other. Preceding siblings are always overlapped by siblings declared after them.

z-index doesn’t work in SVG.

Question 4

SVG defs

Answer 4

A header containing SVG elements that will not be displayed until referenced by a ‘use’ element.

Filters, clippings, gradients, masks and reusable shapes are usually declared here.

Each of the elements within must have an id in order to be referencable.

Question 5

SVG use

Answer 5

An SVG tag used for displaying one of the elements declared in the header.

The element is referenced by id using the xlink notation:

use xlink:href="#myShape" /

Question 6

Matrix transforms

Answer 6

Used to scale(), translate(), skew(), or rotate() any shape or group or the entire SVG viewport.

These commands are used inside of the transform XML attribute, and their order is significant.

Question 7

viewBox attribute values

Answer 7

viewBox=“x y w h”

x, y - the centre of coordinates

Question 8

Gradients

Answer 8

Linear gradients are created perpendicular to a line so they require the same attributes as the line element. Radial gradients use circle attributes.

Gradients should have at least one child stop with:

• a non-zero ‘offset’ and
• stop-color different than black

Gradients are usually declared in the defs header, and used as a fill or stroke value.

Question 9

Clip mask

Answer 9

Clip mask is created with any element declared inside the clipPath element.

This is usually done in the defs header.