tutorials New SVG tutorial

A first version of an SVG tutorial to address part of issue #100 . This tutorial is set as an extension to the HTML/CSS tutorial and leverages concepts learnt there. In particular, it takes the decision to focus on embedding SVG in an HTML page rather than creating stand-alone documents. It is split into 4 lessons so far:

Introduction to SVG: basic shapes and a short word on shape order
Path and complex shapes: a whole lesson on the path element
Groups and transforms: introduction to the g element and the transform attribute
Advanced SVG: images and advanced features that use the defs tag

The complete tutorial should give students a good grounding in creating SVG documents. The lessons can be quite long despite trying hard not to get into details. I would very much welcome feedback on whether the explanations are clear.

Note that you will have to run jekyll to see the examples properly as they won't show in the GitHub markdown preview.

Note that this pull request includes an update to one of the HTML tutorial documents that I accidentally pulled from the #389 fix.

Dec 20 '18 23:12 brunogirin

@cassieevans regarding your general points:

Why use SVG? Benefits of using inline SVG vs SVG as an image

Yes, I tried doing that in the first lesson and then found out that I ended up with a very long lesson so not sure how to balance it. What are the key points you think I should include?

Making SVG accessible

Definitely. The whole HTML tutorial needs a chapter on accessibility and I'd like to do that one first so that the SVG one can leverage it. At the moment I'd end up adding a lot of info that should be in the HTML tutorial.

Scaling SVG/ viewbox (such a frustrating thing if you're expecting SVG to behave like an image)

I was planning to do that in a lesson 5 but wanted to get the first 4 lessons looked at first. This is also getting to the limits of my knowledge in SVG so I would appreciate help in this area.

Optimizing SVG (SVGOMG) USE/shadow DOM? Using SVG as an Object/Data URI?

This is an area where I have no experience whatsoever. I'm happy to look into it but I would need help in getting it right. Regarding the shadow DOM, I feel that this would be too advanced compared to other codebar tutorials.

To give you additional context, my experience with SVG is mostly around producing dynamic content such as graphs with the d3 library so this tutorial probably skews towards that aim. One aspect that might be useful to include is how you can deal with illustrative SVG where you get SVG files exported by Illustrator or Sketch and want to include them in your design.

Mar 09 '19 10:03 brunogirin

Yeah, agreed with a lot of your points. My SVG experience is more illustrative/animation so I'm right the other end!

I reckon some further reading/links out to other articles would fill the gaps and then we'd be golden!

a mention of SVGOMG in the tools section of the first tutorial
a mention of SVG accessibility - link to this - https://css-tricks.com/accessible-svgs/
and a mention of viewbox/scaling - link - https://css-tricks.com/scale-svg/

Thanks again for all the hard work 👍

Mar 22 '19 15:03 cassieevans

I reckon some further reading/links out to other articles would fill the gaps and then we'd be golden!

No problem.

a mention of SVG accessibility - link to this - https://css-tricks.com/accessible-svgs/

and a mention of viewbox/scaling - link - https://css-tricks.com/scale-svg/

Should I put those 2 in lesson 4? Maybe I can add a short "going beyond the tutorial" section that mentions all this.

Mar 22 '19 16:03 brunogirin

Added Sketch and SVGOMG to the tools section in lesson 1. Added the two css-tricks articles to lesson 4.

Mar 24 '19 19:03 brunogirin