SVG

Question 1

How can you create simple shapes that you then re-use in an SVG drawing?

Answer 1

use the defs element to define illustrations that are inside of g tags with IDs. Then use the ‘use’ element and reference the ID.

Question 2

Draw a 2px wide white line from 0,0 to 100,100

Answer 2

line x1=”0” y1=”0” x2=”100” y2=”100” stroke=”white” stroke-width=”2”

Question 3

If the viewBox is smaller than the viewport, what happens to an image?

Answer 3

It will get larger. It will be rendered into the viewbox; then the viewbox will scale up to fill the viewport.

Question 4

If the viewBox is larger than the viewport, what will happen to an image?

Answer 4

It will get smaller. It will render into the viewbox; then the viewbox will scale down to fit in the viewport.

Question 5

How can you manage how images render when viewBox and viewport aren’t the same?

Answer 5

Use preserveAspectRatio = Align takes things like “xMaxYMin”; meet/slice is like background-size contain or cover.

Question 6

What is the viewport?

Answer 6

It’s the area where svg is visible. In concrete terms, it’s managed by width and height. E.g. svg width=”800” …