db4rr / joy-of-svg

Materials for a workshop on Scalable Vector Graphics

The Joy of SVG

Hi there! This repository includes materials for a workshop on Scalable Vector Graphics, first delivered on June 2019 at the soap! conference in beautiful Kraków, Poland.

Why SVG?

• Scalable: rendered in any size and resolution
• Created by drawing vectors that have strokes and fills
• XML-based: easily translated
• Can be controlled with CSS and JavaScript

What can I find here?

• 1_coding_shapes includes examples of SVG syntax.
• 2_screenshots shows how an SVG can add vector overlays over a raster image.
• 3_containers has examples of how SVG files behave when included in different HTML container elements.
• 4_links shows examples of hyperlinks inside SVG code.
• 5_interactive has a simple example of an SVG with javascript-enabled interactivity.
• 6_responsive_1 and 6_responsive_2 have examples of responsive graphics.

Resources

• Inkscape
• SVGoptimizer
• How to use SVGs
• How to scale SVGs
• The noun project
• W3C SVGv2 docs
• Mozilla SVG docs