SVGs on the Web

Daily Standup

In the same groups as last class

Each person takes a turn to answer the following questions:

1. What did you do yesterday?
2. What will you do today?
3. Anything blocking your progress?

Boolean Operations

These are used to manipulate paths with one another. They are essential for creating high quality designs.

Most useful Booleans

• Union: They will become 1 shape
• Subtract: The top shape cuts off from the bottom shape

Union is different from grouping. Grouping doesn’t actually change any elements

SVG Optimization

Instructor Led Activity: Update the Android logo Using Booleans

• Let’s Look at our android logo and use subtract and union to reduce the paths
• Use SVGOMG to optimize and prepare the svg for use in code
  • remove height and width when you need it to be responsive
  • Prefer viewbox
  • Prettify output

Style SVGs with CSS

CSS Tricks Essential SVG Resource

Key Takeaways

• You have 3 options to load svgs onto a web page
• Pick the option that makes sense for the use case
• Inline SVGs can be edited with css and js

Expectations of working with SVGs

As a developer, you might not have to work with svgs too much. However when you do, you’ll want to nail these points:

• Always clean up your design files by labelling, grouping, removing unnecessary paths, and running booleans when necessary
• Always optimize your svgs so that the files are small and so they can be used inline without headaches
• Be aware of the size of your frame
  • SVGs are scalable, but big designs create big files
• Consider how your logo will look monochrome (1 color & transparent)

In Line SVG Demos

• CSS Hover
• Transitions