Open brunogirin opened 5 years ago
@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.
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!
Thanks again for all the hard work 👍
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.
Added Sketch and SVGOMG to the tools section in lesson 1. Added the two css-tricks articles to lesson 4.
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:
path
elementg
element and thetransform
attributedefs
tagThe 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.