Skip to main content

Day 6 - Styling SVGs

Assignment 3: SVG Logo Design

  • Due Monday October 3rd
  • Create an SVG Logo
  • Create variations by styling it inline with css

Morning Design Warmup Activity (20 minutes)

  • Design Pictionary
  • Variation for today:
    • Everyone pick a logo or symbol to play pictionary with
    • These can serve as svgs to use during lab time

1. SVG Basics

Materials

Slides: Scalable Vector Graphics

2. Demo: Exporting SVGs

Materials

Activity: Optimize A Logo and set up a workspace (15 Minutes)

  • Either use the Skully Pinball Mascot linked above, or your svg from the first Activity
  • Optimize the svg using SVG OMG
  • Set up a git repo and export the svg file into it
    • put the svg in an assets/logos folder.
    • create a main.css file in assets/css/main.css
    • create an index.html file in the root of your repo
  • we will use this space for working on inline svg styling for the rest of the class

3. Inline SVGs

  • Add an svg’s code directly into your html file
  • Name the paths so they’re easy to identify
  • Add css classes to the paths to edit their color
  • You can also add animations to the svgs

Lab time