CPNT 201 Day 5 - Scalable Vector Graphics

Trophy of the Day: Stylized SVG

• Create an svg and stylize it with css
  • add classes to paths
  • for interaction use transitions and pseudo classes
  • for animation try using keyframes

CPNT 201 Assignment 3: SVG Logo

• Due: Friday October 8th @ 11:59pm

Topic 1: Width and Height Img Src

• Adding width and height to images
• How to style them after setting this
• Any questions about assignment 2
• This article has some good indepth information on dealing with issues related to setting width and height

Quick follow up on fonts and reset

• go over font settings and reset css in Ash's image optimization repo

Topic 1: SVGs in HTML

• Repo with instructions for design demos

Activity: SVG Logo Design Continued

• Add to a previous svg design
• Build off of one of the demos done in class
• optimize with svgomg
• Download/export the svg file and store it in a repo
  • If you would like, you are welcome to fork the repo that I've provided
• inspect with dev tools after loading it into a browser
• visually inspect code for svg in vscode

Topic 2: Optimize an SVG

Tool Time: SVGOMG

• Jake Archibald's svg optimization app svgomg

ViewBox and SVG Anatomy

• go over svg syntax
  • path
  • heigth and width
  • viewBox

Topic 3: Add an SVG to HTML and style with CSS

• Tony's Gist
• Style svgs with css using fill and stroke
• Css filters can be applied to inline svgs

Activity: Add 3 svgs to a web page

• Quick activity (10min)
• add 1 image with the img tag
• add 1 inline svg
• Create a section on a page and use an svg background. One way to do this is with heropatterns

Topic 4: SVG Style Tips

• Color
• Size
• Transitions and pseudo classes
• Keyframes

Lab Time: Stylize svgs in html