Master programming syntax, solve interactive challenges & run live code in Syntaxis Explore Arena →
menu_book Course Curriculum (SVG) expand_more
Document Basics
svg root viewBox width and height preserveAspectRatio group element defs title and desc use element
Shapes
rect circle ellipse line polyline polygon path
Path Data
Move command Line commands Horizontal and vertical commands Cubic Bézier Quadratic Bézier Arc command Close path Relative path commands
Paint & Styling
fill stroke stroke-width stroke-linecap stroke-linejoin dash array opacity currentColor
Transforms & Text
translate scale rotate transform origin concept text tspan text-anchor dominant-baseline
Advanced SVG
linearGradient radialGradient clipPath mask filter blur marker symbol sprites accessible SVG
SVG / Document Basics

use element

Learn use element in SVG with a dedicated explanation, a concept-specific example, a production caution, and a mastery check.

12 min read • Beginner
svg-008.svg
svg 
<svg viewBox="0 0 140 60"><defs><symbol id="star" viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></symbol></defs><use href="#star" x="10" width="40"/><use href="#star" x="70" width="40" fill="gold"/></svg>
What to watch
Content source & attribution
Original Syntaxis Content · Original Syntaxis Content

Lesson quizzes

use element Mastery Check →
← PREVIOUS
title and desc
NEXT →
rect