Black Friday 2024: 25+ Ways to Save on Online Learning

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Learning SVG

via LinkedIn Learning

Go to class Write review

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Grab it
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.

Syllabus

Introduction
  • Welcome
  • Using the exercise files
  • What this course is, and is not
1. SVG: Core Principles
  • What is SVG?
  • SVG as graphics
  • SVG in the browser
  • SVG as code
2. Anatomy of an SVG
  • Add SVG to a web document
  • Define the display size of an SVG
  • Understand the viewBox
  • SVG shape elements
  • Group SVG shapes with
  • Reuse SVG symbols with and
  • Size used SVG symbols
  • Apply CSS to individual symbol instances
3. Creating SVGs in Code
  • SVG shapes overview
  • Draw a line
  • Draw a rectangle
  • Draw a circle
  • Draw an ellipse
  • Draw a polyline
  • Draw a polygon
  • Draw a path
  • Add text to an SVG
  • Convert text to outlines
  • Add an external image to an SVG
  • Rotate SVG shapes
4. Strokes, Markers, Gradients, and Patterns
  • Stroke
  • Dashes
  • Markers
  • Gradients for fills and strokes
  • Tiled patterns
5. Practical SVG
  • Turn complex graphics into usable SVG
  • Make SVG accessible
  • Clean SVG files for web publishing
Conclusion
  • Next steps

Taught by

Morten Rand-Hendriksen

Reviews

4.8 rating at LinkedIn Learning based on 50 ratings

Start your review of Learning SVG

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.