SVG Fundamentals

Homework

1. Review
   • Anchor element: Linking to an element on the same page
2. Scalable Vector Graphics
   • Watch: A beginners guide to SVG: Part 1 by Kevin Powell. You can skip Part 2 but watch Part 3 if you’re interested.
3. Optimizing SVG
   • Tool: SVG OMG
   • Watch: How to Optimize SVGs from your editor by Kevin Powell (about 19 minutes into a longer video)
   • Advanced: Understanding and Manually Improving SVG Optimization
4. SVG in HTML Documents
   • Read: Using SVG on CSS-Tricks
   • Read: How to Scale SVG
   • How to Work with SVGs in Figma, HTML, and CSS by Build UX
   • Optional (but fun): SVG Can Do That?! by Sarah Drasner

---

Morning reflection

Housekeeping

1. Javascript homework
2. Show-and-Tell
   • Joel
   • Vitaly

---

1. Inserting SVGs

Learning Objectives

1. Explore 3 ways to insert an SVG into an HTML page.
2. Discuss the advantages and disadvantages of each method.
3. Style an inline svg with CSS using fill and stroke.
4. Apply a CSS filter to an inline svg.

Materials

• Gist: 3 ways to insert an SVG

Key Takeaways

• Inserting an svg as either an HTML (using an img element) or CSS image (using background-image) treats it like any other image.

• Inserting an inline SVG allows you to style it with CSS.

  Note: SVGs are defined by a different specification than HTML and CSS. Background colours and borders are controlled with the fill and stroke properties, respectively. See MDN:Fills and Strokes

• When inserting as an image, all styling must be included with the SVG itself. When using an inline svg element, these styles can be removed (assuming you’re styling with CSS).
• Unlike images, the browser will not break the aspect ratio of an inline svg and will crop the graphic instead. Set preserveAspectRatio to none if you want to override this (this is rarely preferred).

---

2. viewBox and SVG anatomy

Learning Objectives

1. Discuss the role of the width and height attributes of an svg element and it’s relationship to responsive design.
2. Discuss the nature of the viewBox and its relationship to the rest of an SVG.
3. Explore different methods of exporting an SVG from Figma (for example) to control the viewBox.
4. Optimize an svg with SVGOMG.

Materials

• Gist: The problem with viewBox

Key Takeaways

• Remove width and height attributes from and svg element to make it responsive.

  Warning: There are many references to the SVG “viewport” in online resources, relating to the width and height attributes. This is not the same as the browser viewport. Save yourself the hassle and just delete the width and height attributes and pretend SVG viewports don’t exist (for now).

• SVG styles and effects cannot leave the viewBox. Make your viewBox a little larger than the graphic if styles or filter effects are getting clipped. It’s easiest to do this in a vector editor like Figma or Illustrator.
• The xmlns attribute is needed if you want to support non-HTML5 browsers (we probably do) or XML parsers (we probably don’t).
• SVGOMG:
  • Most of the defaults are fine.
  • Prettify the code, if desired. It won’t add a lot to file size.
  • width and height attributes will be removed by default (this is good).
  • A lower precision will result in a smaller file size but very low values might affect the detail of your designs.

---

Open lab-time

Activities:

1. Gist: SVG Anatomy
2. Gist: Inserting an SVG
3. Gist: Add an SVG colour scheme

---

Tony’s goals for Lab-Time

• Menu cleanup
• Add JS MDN exercises to primary nav

---

Dailies

• Submit today’s Codepen/repo/gist to the Dailies section (in Assessments) in Brightspace.