Learn to draw with code! Use the Scalable Vector Graphics (SVG) format to create attractive and responsive web graphics that you can manipulate easily with code.
- [Morten] Hello and welcome to Learning SVG, my name is Morten Rand-Hendriksen and I'll be your guide as we take apart scalable vector graphics and figure out how they work and what we can do with them. In this course, we'll take a deep dive into the inner workings of SVG to understand them not just as graphics, but as full fledged web documents. We'll start with brief introduction to SVG, what they are, how they work, and how we use them. Next we'll look at the over all structure of an SVG and figure out how its components fit together.
We'll take a deep dive into SVG shapes and how to style them, and finally we'll take a brief look at how to convert a graphic design into an accessible manageable SVG ready for production. SVG is a graphics format made for the web and knowing how SVG works give you new powers as a web designer and developer. SVG is changing the way we work with graphics online and I'm here to show you how to get it right, so let's get cracking with Learning SVG.
Author
Released
9/21/2017- What is SVG?
- Adding SVG to the web
- Drawing shapes
- Grouping shapes
- Styling SVG with CSS
- Adding text
- Designing with strokes, fills, gradients, and patterns
Skill Level Beginner
Duration
Views
Related Courses
-
Creating Web Icons with SVG
with Morten Rand-Hendriksen1h 44m Intermediate -
Design the Web: Responsive SVG Images
with Chris Converse22m 46s Beginner -
Web Design Tips: SVG Design
with Brian Wood4m 32s Appropriate for all -
Advanced SVG Animation
with Sarah Drasner2h 55m Intermediate
-
Introduction
-
Welcome59s
-
-
1. SVG: Core Principles
-
What is SVG?2m 57s
-
SVG as graphics6m 23s
-
SVG in the browser5m 23s
-
SVG as code3m 23s
-
-
2. Anatomy of an SVG
-
Add SVG to a web document3m 54s
-
Understand the viewBox5m 20s
-
SVG shape elements4m 52s
-
Group SVG shapes with <g>2m 54s
-
Size used SVG symbols6m 14s
-
-
3. Creating SVGs in Code
-
SVG shapes overview2m 31s
-
Draw a line2m 52s
-
Draw a rectangle4m 24s
-
Draw a circle1m 27s
-
Draw an ellipse1m 59s
-
Draw a polyline2m 44s
-
Draw a polygon2m 12s
-
Draw a path3m 59s
-
Add text to an SVG9m 4s
-
Convert text to outlines4m 42s
-
Rotate SVG shapes5m 18s
-
-
4. Strokes, Markers, Gradients, and Patterns
-
Stroke5m 50s
-
Dashes4m 30s
-
Markers6m 49s
-
Tiled patterns3m 26s
-
-
5. Practical SVG
-
Make SVG accessible5m 3s
-
Conclusion
-
Next steps1m 20s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Welcome