sample-code

SVG - Scalable Vector Graphics

Terminology

Source: How to Scale SVG

viewBox Attribute

The viewBox is an attribute of the svg element. Its value is a list of four numbers, separated by whitespace or commas: x, y, width, height. x and y set the top-left position of the coordinate system inside the svg. width and height define, among other things, the aspect ratio of the svg.

preserveAspectRatio

When there is a viewBox, preserveAspectRatio describes how the image should scale if the aspect ratio of the viewBox doesn’t match the aspect ratio of the viewport.

Presentational Attributes

svg attributes, such as fill and stroke, that can be overridden by CSS.

Precision

An svg term for the number of decimal places that are used to place objects (among other things) within the viewBox

.

---

Sample Code

• Activity 1 Starter Code
• Activity 2 Starter Code
• No Bugs!
• Pinball Cradle
• Flipper Animation

---

Key Takeaways

• xmlns is needed if you want to support non-HTML5 browsers (we probably do) or XML parsers (we probably don’t).
• viewBox is the key to a properly responsive SVG. While the values are often pixel-based, the values of this attribute really set the aspect ratio and provide a reference grid for the rest of the svg objects to map to.
  • Note: none of the graphics contained inside an svg will be viewable outside the viewBox.
• preserveAspectRatio can be set to none if you don’t want the browser to respect the aspect ratio set by the viewBox. Otherwise, the browser will try its best to not violate the aspect ratio.
• width and height attributes set an optional default size for the svg that can be overridden with CSS.
• svg is its own specification with its own style properties. Although you can style them with CSS, you need to use the proper svg properties. For example, use fill instead of background-color.
• A lower precision will result in a smaller file size but very low values might affect the detail of your designs.

---

Activity 1: SVG Anatomy

1. Copy the Anatomy Starter code into a new project.
2. Using your preferred vector editor, create and export the following SVG objects as separate files.
   • Line
   • Curve
   • Circle
   • Square
   • Polygon
   • Star
3. Open each file in your code (not vector) editor. What do you see?
   • Does it have width and height set?
   • Does it have a viewBox?
   • Are the styles in a style element, assigned as an attribute or an inline style?
4. Try different export settings and repeat. Are there any differences in the exports?
5. Decide on a final format and optimize it with SVGOMG.

---

Activity 2: SVG in HTML

Take a design from yesterdays session and the following Starter Code:

1. Insert the SVG as an img element.
2. Insert it as a background-image.
3. Insert it as an inline SVG.
4. Ask yourself and experiment: What effect does width, height and viewBox have on each element?
5. Inline svg elements can be styled with CSS!
   1. Identify the objects within your inline svg that you’d like to style.
   2. Add a class attribute so we can target it with CSS.
   3. Change the background color with the fill property.
   4. Add a stroke with the stroke (and associated) property.

---

Activity 3: Themed SVGs

Take the Pinball Cradle example and change the design to a new colour scheme.