New SVG tutorial #430
New SVG tutorial #430
Conversation
Difference between "We will be styling this page" at https://github.com/codebar/tutorials/blob/master/html/lesson2/tutorial.md#today-we-will-be-focusing-on-fundamental-css-concepts and "Download the files required to begin working through the tutorial from here(mac/linux) or here(windows)" at https://gist.github.com/hundred/7332441/download
missing class from the tutorial example
There was a problem hiding this comment.
This is overall a great tutorial for students that want to understand the inner workings of SVG.
Great job, thanks Bruno for all the hard work that's gone into this.
However, I feel that students would benefit from stepping back a bit and learning some more everyday, practical things before deep diving into handwriting SVG paths.
e.g.
Why use SVG?
Benefits of using inline SVG vs SVG as an image
Making SVG accessible
Scaling SVG/ viewbox (such a frustrating thing if you're expecting SVG to behave like an image)
Optimizing SVG (SVGOMG)
USE/shadow DOM?
Using SVG as an Object/Data URI?
|
@cassieevans regarding your general points:
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?
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.
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.
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 |
|
Yeah, agreed with a lot of your points. 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 👍 |
No problem.
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. |
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:
pathelementgelement and thetransformattributedefstagThe 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
jekyllto 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.