Kenhuang Academy
  • English

      • SVG Reference Manual

      This handbook provides a quick reference for SVG elements and attributes.

      Basic Shape Elements

      ElementDescriptionKey Properties
      <rect>Rectanglex, y, width, height, rx, ry
      <circle>Circlecx, cy, r
      <ellipse>Ellipsecx, cy, rx, ry
      <line>Straight linex1, y1, x2, y2
      <polyline>Polylinepoints
      <polygon>Polygonpoints
      <path>Pathd

      Text Elements

      ElementDescriptionKey Properties
      <text>Textx, y, dx, dy, text-anchor
      <tspan>Text fragmentx, y, dx, dy
      <textPath>Path texthref, startOffset

      Container Elements

      ElementDescriptionPurpose
      <svg>SVG root elementDefines SVG canvas
      <g>GroupGroups multiple elements
      <defs>DefinitionsDefines reusable elements
      <symbol>SymbolDefines reusable graphics
      <use>UseReferences defined elements

      Gradient Elements

      ElementDescriptionKey Properties
      <linearGradient>Linear gradientx1, y1, x2, y2, gradientUnits
      <radialGradient>Radial gradientcx, cy, r, fx, fy
      <stop>Gradient color stopoffset, stop-color, stop-opacity

      Filter Elements

      ElementDescription
      <filter>Filter container
      <feGaussianBlur>Gaussian blur
      <feDropShadow>Drop shadow
      <feOffset>Offset
      <feBlend>Blend
      <feColorMatrix>Color matrix
      <feMerge>Merge
      <feFlood>Flood
      <feComposite>Composite

      Path Commands

      Line Commands

      CommandNameParametersExample
      Mmovetox,yM10,20
      Llinetox,yL50,60
      Hhorizontal linexH100
      Vvertical lineyV80
      ZclosepathnoneZ

      Curve Commands

      CommandNameParametersDescription
      Ccubic bezierx1,y1 x2,y2 x,yTwo control points
      Ssmooth cubic bezierx2,y2 x,yOne control point
      Qquadratic bezierx1,y1 x,yOne control point
      Tsmooth quadraticx,yNo control points
      Aarcrx,ry rot large sweep x,yElliptical arc

      Common Attributes

      Fill and Stroke

      AttributeDescriptionValue Examples
      fillFill color#3b82f6, rgb(59,130,246), none
      fill-opacityFill opacity0.5
      fill-ruleFill rulenonzero, evenodd
      strokeStroke color#3b82f6, none
      stroke-widthStroke width2, 2px
      stroke-opacityStroke opacity0.8
      stroke-linecapEndpoint stylebutt, round, square
      stroke-linejoinJoin stylemiter, round, bevel
      stroke-dasharrayDash pattern5,3, 10,5,2,5
      stroke-dashoffsetDash offset10

      Opacity and Visibility

      AttributeDescriptionValue Examples
      opacityOverall opacity0.5
      visibilityVisibilityvisible, hidden
      displayDisplayinline, none

      Transforms

      AttributeDescriptionValue Examples
      transformTransformtranslate(10,20), rotate(45), scale(1.5)
      transform-originTransform origincenter, 50% 50%

      Transform Functions

      FunctionDescriptionExample
      translate(x,y)Translatetranslate(100,50)
      rotate(angle)Rotaterotate(45)
      rotate(angle,cx,cy)Rotate around pointrotate(45,100,100)
      scale(x,y)Scalescale(1.5), scale(2,1)
      skewX(angle)X skewskewX(30)
      skewY(angle)Y skewskewY(30)
      matrix(a,b,c,d,e,f)Matrix transformmatrix(1,0,0,1,0,0)

      Text Attributes

      AttributeDescriptionValue Examples
      font-familyFont familyArial, sans-serif
      font-sizeFont size16, 16px, 1.2em
      font-weightFont weightnormal, bold, 700
      font-styleFont stylenormal, italic
      text-anchorText alignmentstart, middle, end
      text-decorationText decorationunderline, line-through
      letter-spacingLetter spacing2px
      word-spacingWord spacing5px

      Color Formats

      <!-- Named colors -->
fill="red"
fill="steelblue"

<!-- Hexadecimal -->
fill="#ff0000"
fill="#f00"

<!-- RGB -->
fill="rgb(255, 0, 0)"
fill="rgb(100%, 0%, 0%)"

<!-- RGBA -->
fill="rgba(255, 0, 0, 0.5)"

<!-- HSL -->
fill="hsl(0, 100%, 50%)"

<!-- HSLA -->
fill="hsla(0, 100%, 50%, 0.5)"

      viewBox and preserveAspectRatio

      viewBox

      <svg viewBox="min-x min-y width height">
<!-- Example -->
<svg viewBox="0 0 100 100">

      preserveAspectRatio

      <svg preserveAspectRatio="align meetOrSlice">

<!-- Alignment values -->
xMinYMin | xMidYMin | xMaxYMin
xMinYMid | xMidYMid | xMaxYMid
xMinYMax | xMidYMax | xMaxYMax
none

<!-- Examples -->
<svg preserveAspectRatio="xMidYMid meet">
<svg preserveAspectRatio="xMinYMin slice">
<svg preserveAspectRatio="none">

      Common Filter Examples

      Shadow

      <filter id="shadow">
  <feDropShadow dx="3" dy="3" stdDeviation="3" flood-color="#00000040"/>
</filter>

      Blur

      <filter id="blur">
  <feGaussianBlur stdDeviation="5"/>
</filter>

      Grayscale

      <filter id="grayscale">
  <feColorMatrix type="saturate" values="0"/>
</filter>

      Glow

      <filter id="glow">
  <feGaussianBlur stdDeviation="4" result="blur"/>
  <feMerge>
    <feMergeNode in="blur"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

      Animation Attributes

      animate

      <animate
  attributeName="attribute name"
  from="start value"
  to="end value"
  values="value1;value2;value3"
  dur="duration"
  begin="start time"
  repeatCount="repeat count|indefinite"
  fill="freeze|remove"
/>

      animateTransform

      <animateTransform
  attributeName="transform"
  type="translate|rotate|scale|skewX|skewY"
  from="start value"
  to="end value"
  dur="duration"
  repeatCount="indefinite"
/>

      Browser Support

      FeatureChromeFirefoxSafariEdge
      Basic shapes✓✓✓✓
      Gradients✓✓✓✓
      Filters✓✓✓✓
      Animation (SMIL)✓✓✓✓
      CSS animation✓✓✓✓