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