https://github.com/jonitrythall/svgworkshop
Full length workshop: Intro to Writing SVG
https://github.com/jonitrythall/svgworkshop
Last synced: 4 months ago
JSON representation
Full length workshop: Intro to Writing SVG
- Host: GitHub
- URL: https://github.com/jonitrythall/svgworkshop
- Owner: jonitrythall
- License: other
- Created: 2016-12-04T18:22:13.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-12-09T14:05:19.000Z (over 8 years ago)
- Last Synced: 2024-12-27T11:24:55.383Z (6 months ago)
- Size: 12.7 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Intro To Writing SVG Workshop
Slides, curriculum notes, and recources for an in person 2.5 hour workshop for adults based on [Pocket Guide to Writing SVG](http://svgpocketguide.com/book/).
**Title**: Intro To Writing SVG
**Grade Level**: Adult
**Experience Level**: Beginner
**Total Time**: 2.5 hours
**Curriculum**: Based on the book [Pocket Guide to Writing SVG](http://svgpocketguide.com/book/) by Joni Trythall
**Objective**: By the end of this workshop students will have a foundational understanding of SVG syntax and the benefits of using it this way over alternative approaches, such as an `img`. With base CodePen demos in place with instructions together we will get started right away writing and editing basic SVG shapes in the browser. Students will learn first-hand about the SVG workspace and sizing and get to make significant changes to the code of a more complex graphic (grapes!) and then jump into using SVG text.
**Topics Covered**: What SVG is, why SVG is awesome, syntax, document organization, writing basic shapes, editing complex graphics in the browser, writing and editing SVG text
**Presentation Format**: slides, CodePen demos, hands-on building
**Materials**: Computers, CodePen, Chrome (pre-installed), [CodePen demos](http://codepen.io/collection/DVYpJK/), [reference site](http://jonitrythall.github.io/svgintro/), [slides](https://docs.google.com/presentation/d/1PZZnf0Z9uViwX8ma4gnbT8BGybIiAygLf_LOkdhclAY/edit?usp=sharing), [Pocket Guide to Writing SVG](http://svgpocketguide.com/book/)
**Prerequisites**: Basic HTML/CSS