SVG Technical FAQ & Answers

Use the <g> (group) element to wrap multiple SVG elements, then apply transforms to the group itself. All children inherit the group's transformations, allowing you to move, rotate, or scale complex objects as one unit.

<g id="bicycle" transform="translate(100, 200) scale(1.5)">
  <circle id="front-wheel" cx="80" cy="0" r="30" />
  <circle id="back-wheel" cx="-80" cy="0" r="30" />
  <path id="frame" d="M -80,0 L 0,-40 L 80,0" />
</g>

The translate(tx, ty) function moves an element by tx units along the x-axis and ty units along the y-axis. Use transform="translate(50, 100)" to move an element 50 units right and 100 units down. If ty is omitted, it defaults to 0.

<!-- Move bicycle 200 units right, 150 units down -->
<g id="bicycle" transform="translate(200, 150)">
  <!-- bicycle parts here -->
</g>

Yes, transform order matters critically. Transforms are applied right-to-left in the attribute string. transform="translate(100, 50) rotate(45)" first rotates, THEN translates, which is different from transform="rotate(45) translate(100, 50)" which translates first, then rotates around the origin.

<!-- These produce DIFFERENT results -->
<rect transform="translate(50, 50) rotate(45)" />  <!-- Rotate, then move -->
<rect transform="rotate(45) translate(50, 50)" />  <!-- Move, then rotate -->

The viewBox attribute takes four values: min-x min-y width height. The first two define the top-left corner coordinate of the visible region, and the last two define the width and height of that region. viewBox="0 0 500 300" shows a 500x300 region starting at origin (0,0).

<!-- Show region from (0,0) to (500,300) -->
<svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Content uses 500x300 coordinate space -->
</svg>

Yes, <g> groups can be nested infinitely. Each nested group can contain other groups, shapes, or any SVG elements, allowing you to create complex hierarchical structures for organizing and transforming related elements together.

<g id="scene">
  <g id="bicycle">
    <g id="wheel">
      <circle cx="100" cy="150" r="30" />
    </g>
  </g>
</g>

Transforms cascade down the hierarchy multiplicatively. A child element's final transform is the combination of all ancestor transforms applied from outermost to innermost, then the element's own transform.

<g id="scene" transform="translate(200, 100)">
  <g id="bicycle" transform="scale(1.5)">
    <g id="wheel" transform="rotate(45 100 150)">
      <circle cx="100" cy="150" r="30" />
      <!-- Final: translate → scale → rotate → circle -->
    </g>
  </g>
</g>

Chain transforms with spaces in a single transform attribute: transform="translate(x, y) rotate(angle) scale(s)". They apply right-to-left: scale first, then rotate, then translate. Each transform operates on the coordinate system created by the previous one.

<!-- Scale to 1.5x, rotate 30°, then move to (100, 50) -->
<rect transform="translate(100, 50) rotate(30) scale(1.5)"
      width="50" height="30" />

Add a viewBox attribute with four values (min-x, min-y, width, height) to the <svg> element, and omit fixed width/height attributes (or set them to percentages). Example: <svg viewBox="0 0 800 600"> creates a coordinate system from (0,0) to (800,600) that scales to fit any container size. The browser automatically maintains aspect ratio and scales the SVG proportionally when the container resizes.

The viewBox attribute defines the position and dimension in user space of an SVG viewport. Its value is a list of four numbers: min-x, min-y, width, and height (e.g., viewBox="0 0 100 100"). These parameters establish the coordinate system for all elements inside the SVG, where min-x and min-y define the top-left corner origin, and width/height define the visible area dimensions. A negative value for width or height is invalid; a value of zero disables rendering.

The M (MoveTo) command lifts the "pen" and moves it to a new starting position without drawing a line. It takes two parameters: x and y coordinates (e.g., M 100 200). Uppercase M uses absolute coordinates relative to the SVG origin (0,0), while lowercase m uses relative coordinates from the previous point.

The L (LineTo) command draws a straight line from the current pen position to a specified endpoint. It takes two parameters: x and y coordinates (e.g., L 200 100). Uppercase L uses absolute coordinates, while lowercase l uses relative coordinates from the current position.

The C command draws a cubic Bezier curve with two control points. Syntax: C x1,y1 x2,y2 x,y where (x1,y1) is the first control point, (x2,y2) is the second control point, and (x,y) is the endpoint. The curve starts at the current pen position and bends toward both control points before reaching the endpoint.

The Z (or z) command closes the current path by drawing a straight line from the current position back to the first point of the path (typically from the initial M command). Case doesn't matter for Z - both uppercase and lowercase behave identically.

The circle element requires three attributes: cx (x-axis center coordinate), cy (y-axis center coordinate), and r (radius). Syntax example: <circle cx="50" cy="50" r="20"/> creates a circle centered at (50,50) with radius 20.

The ellipse element requires four attributes: cx (x-axis center), cy (y-axis center), rx (x-axis radius), and ry (y-axis radius). Syntax example: <ellipse cx="75" cy="75" rx="20" ry="5"/> creates a horizontal ellipse centered at (75,75) with width 40 and height 10.

The rect element requires four attributes: x (left edge position), y (top edge position), width, and height. Optional rx and ry attributes add rounded corners. Example: <rect x="10" y="10" width="100" height="100" rx="10" ry="10"/> creates a 100x100 rectangle at (10,10) with 10-unit rounded corners.

The fill attribute sets the interior color of an SVG shape. Default value is black if omitted. Values can be color names ("red"), hex codes ("#FF6347"), or "none" for transparent/hollow shapes. Example: <circle r="20" fill="#FF6347"/> creates a tomato-red filled circle.

The stroke attribute sets the outline color around an SVG shape's perimeter. Default value is none (no outline). Values can be color names, hex codes, or "none". Example: <circle r="20" fill="none" stroke="blue" stroke-width="2"/> creates a hollow circle with a 2px blue outline.

opacity controls transparency of the entire element (0=invisible, 1=opaque). fill-opacity controls only the fill transparency, and stroke-opacity controls only the stroke transparency. Example: <circle r="20" fill="red" stroke="blue" fill-opacity="0.5" stroke-opacity="1"/> creates a semi-transparent red fill with fully opaque blue outline.

For standalone .svg files, xmlns="http://www.w3.org/2000/svg" is required on the outermost <svg> element per SVG specification. For inline SVG in HTML5 documents served as text/html, xmlns is optional but recommended for compatibility. The value must be http (not https).

The translate(tx, ty) function moves an element by tx units along the x-axis and ty units along the y-axis. If ty is omitted, it defaults to 0. Example: transform="translate(50, 100)" moves the element 50 units right and 100 units down from its original position.

The rotate(angle, cx, cy) function rotates an element by angle degrees around point (cx, cy). If cx and cy are omitted, rotation occurs around the origin (0,0). Example: transform="rotate(45, 100, 100)" rotates 45 degrees clockwise around point (100,100).

The stroke-linecap attribute has three values: butt (default, stroke ends exactly at endpoint), round (adds semicircular cap with radius = stroke-width/2), and square (extends stroke by half stroke-width with rectangular cap). Example: stroke-linecap="round" creates rounded line endings.

The C command creates cubic Bezier curves with two control points: C x1 y1, x2 y2, x y where (x1,y1) is the first control point, (x2,y2) is the second control point, and (x,y) is the end point. The curve starts from the current position and bends toward both control points before reaching the end point.

<path d="M 10 80 C 40 10, 65 10, 95 80" stroke="black" fill="none"/>

The S command continues a cubic curve smoothly by automatically reflecting the previous control point: S x2 y2, x y. It assumes the first control point is the reflection of the second control point from the previous C or S command, ensuring a smooth, constant slope at the connection point.

<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="none"/>

The T command chains quadratic curves smoothly: T x y. It automatically infers the control point by reflecting the previous control point from the last Q or T command through the current position, creating seamless wave-like curves.

<path d="M 10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="none"/>

Combine L (line) commands with C, S, Q, and T (curve) commands in the same d attribute. The path continues from the end of each command to the start of the next. Use L for straight edges like legs or beak edges, then switch to C/S for curved sections like the body.

<path d="M 50 100
         L 60 150          <!-- straight leg -->
         L 65 160          <!-- foot -->
         M 50 100          <!-- return to body -->
         C 45 80, 40 60, 45 40  <!-- curved body -->
         L 55 30           <!-- straight neck section -->
         C 58 20, 62 15, 70 15" <!-- curved head -->
      stroke="black" fill="none"/>

Use uppercase C for absolute coordinates when anchoring to fixed positions (like the pelican's body center). Use lowercase c for relative coordinates when drawing flowing shapes where each point relates to the previous one (like a curving neck). Relative commands make it easier to move or scale entire path sections.

<!-- Absolute: fixed positions -->
<path d="M 100 100 C 120 80, 140 80, 160 100"/>

<!-- Relative: each point based on previous -->
<path d="M 100 100 c 20 -20, 40 -20, 60 0"/>

Use the <circle> element with cx and cy for center coordinates and r for radius. For a bicycle wheel, set fill="none" and stroke for the rim outline. Example: <circle cx="100" cy="100" r="40" fill="none" stroke="black" stroke-width="3"/> creates a wheel rim centered at (100,100) with 40px radius.

Use <line> elements with x1, y1, x2, y2 coordinates and stroke-width for tube thickness. For a top tube: <line x1="150" y1="120" x2="250" y2="120" stroke="black" stroke-width="4"/>. Use stroke-linecap="round" for rounded tube ends that connect smoothly at joints.

Draw individual chain links as rounded rectangles using <rect> with rx, ry for corner rounding, then repeat/translate them along a path. Example: <rect x="0" y="0" width="8" height="4" rx="1" fill="none" stroke="black"/> creates one link. Use <use> with x offset to repeat: <use href="#chainlink" x="6"/>.

Use <path> with quadratic Bézier curves (Q command) for smooth handlebar bends. Example: <path d="M 100,80 Q 120,60 140,80" stroke="black" stroke-width="3" fill="none"/> creates a curved handlebar where the control point (120,60) determines the curve's apex.

Use a <path> to create a C-shaped curve hugging the wheel rim, with two small rectangles as brake pads. Example: <path d="M 80,100 Q 80,85 100,85 Q 120,85 120,100" stroke="black" fill="none" stroke-width="2"/> creates the caliper arm, then <rect x="78" y="95" width="4" height="6" fill="#666"/> adds brake pads positioned near the rim.

Use transform="rotate(angle cx cy)" where cx and cy are the center coordinates of the element you want to rotate. For a wheel at position (100, 150) with radius 50, use transform="rotate(45 100 150)" to rotate 45 degrees around the wheel's center. Without cx/cy parameters, rotation defaults to the SVG origin (0,0).

<!-- Wheel rotating around its center -->
<circle cx="100" cy="150" r="50" transform="rotate(45 100 150)" />

The scale(sx, sy) function scales an element by sx horizontally and sy vertically. If only one value is provided (scale(2)), it scales uniformly in both dimensions. Note that scale affects the coordinate system, not just visual size - a stroke-width of 2 scaled by 2 will render at 4 pixels wide.

<!-- Uniform scaling (2x in both dimensions) -->
<g transform="scale(2)">...</g>

<!-- Non-uniform scaling (2x width, 1.5x height) -->
<g transform="scale(2, 1.5)">...</g>

Use <animateTransform attributeName="transform" type="rotate" from="0 cx cy" to="360 cx cy" dur="2s" repeatCount="indefinite" /> as a child of the element to rotate. The from and to values specify rotation angle and center point (cx, cy). Set repeatCount="indefinite" for continuous animation.

<circle cx="100" cy="150" r="30" fill="gray">
  <animateTransform
    attributeName="transform"
    type="rotate"
    from="0 100 150"
    to="360 100 150"
    dur="2s"
    repeatCount="indefinite" />
</circle>

preserveAspectRatio controls how an SVG scales when the viewport aspect ratio differs from the viewBox. The default value xMidYMid meet centers the graphic and scales to fit both dimensions (like CSS background-size: contain). Use xMidYMid slice to fill the viewport and crop overflow (like background-size: cover). The first part (xMidYMid) controls alignment (e.g., xMinYMin for top-left, xMaxYMax for bottom-right), and the second part (meet/slice) controls scaling strategy.

Set HTTP caching headers for SVG files to reduce repeat downloads. For static SVGs (versioned filenames like pelican.v2.svg or cache-busted pelican.svg?v=123), use long cache durations: Cache-Control: public, max-age=31536000 (1 year). For frequently-updated SVGs, use shorter durations (e.g., 1 day) or implement ETag validation. In nginx: location ~* \.svg$ { add_header Cache-Control "public, max-age=31536000, immutable"; }.

The polygon element uses a points attribute containing a list of x,y coordinate pairs separated by spaces or commas. Each point requires two numbers (x and y), and the shape automatically closes by drawing a line from the last point back to the first. Example: <polygon points="50 160 55 180 70 180 60 190 65 205"/> creates a 5-pointed closed shape.

The stroke-width attribute sets the thickness of the outline around an element in user units. The stroke is drawn centered on the path, with half the width extending on each side. Example: stroke-width="3" creates a 3-unit thick outline. Values can be integers or decimals.

The viewport (width/height attributes) defines the actual display size in pixels or CSS units. The viewBox defines the internal coordinate system and which portion is visible. Example: <svg width="200" height="200" viewBox="0 0 100 100"> displays a 200x200 pixel SVG but uses 100x100 internal coordinates, effectively 2x zoom.

The <g> element groups multiple SVG shapes together so they can be transformed as a unit. Transforms applied to a group affect all nested elements. Groups can be nested, and child elements inherit parent group attributes. Example: <g transform="translate(50,50) rotate(45)"><circle.../><rect.../></g> moves and rotates both shapes together.

The Q command creates quadratic Bezier curves with one control point: Q cx cy, x y where (cx,cy) is the control point and (x,y) is the end point. Simpler than cubic curves, quadratic curves are ideal for gentle, symmetric curves like the pelican's belly or wing edges.

<path d="M 10 80 Q 52.5 10, 95 80" stroke="black" fill="none"/>

Control points act like magnets that pull the curve toward them. Moving control points closer to the start/end points creates tighter curves, while placing them farther away creates gentler arcs. For cubic curves, the first control point affects the curve's departure angle, and the second affects its arrival angle.

<!-- Tight curve: control points close -->
<path d="M 0 50 C 10 10, 40 10, 50 50" stroke="blue" fill="none"/>

<!-- Gentle curve: control points far -->
<path d="M 0 50 C 25 -20, 75 -20, 100 50" stroke="red" fill="none"/>

To reflect a control point, calculate its mirror position through the connection point. If the previous control point is at (x1,y1) and the connection point is at (x0,y0), the reflected control point is at (2x0 - x1, 2y0 - y1). This ensures the tangent lines align at the connection, creating a smooth visual flow.

// Reflect control point (x1,y1) through connection point (x0,y0)
const reflectedX = 2 * x0 - x1;
const reflectedY = 2 * y0 - y1;

Use chained cubic Bezier curves with the S command to create a long, flowing neck. Start with M to position, use C for the first curve with two control points, then chain S commands that auto-reflect control points for smooth transitions. This maintains consistent curvature without visible joints.

<path d="M 100 200
         C 95 170, 90 140, 95 110
         S 105 50, 110 20
         S 115 -10, 120 -30"
      stroke="black" fill="none"/>

Combine cubic curves for the long upper beak and quadratic curves for the stretchy lower pouch. Use C command for the hard upper mandible with tight control points, then Q or T commands for the soft, baggy lower pouch with looser control points to create a drooping effect.

<path d="M 50 20
         C 70 18, 90 18, 100 20
         L 100 25
         Q 85 35, 70 38
         Q 55 35, 50 25 Z"
      stroke="black" fill="#f5deb3"/>

Use a closed path with cubic Bezier curves (C and S commands) that flow around the perimeter. Place 4-8 anchor points around the shape and use control points positioned about 1/3 of the distance between anchors to create smooth, rounded transitions. Close the path with Z.

<path d="M 50 20
         C 70 15, 90 15, 100 30
         S 105 60, 95 80
         S 70 95, 40 85
         S 25 60, 30 35
         S 35 20, 50 20 Z"
      fill="#e0e0e0" stroke="black"/>

Use repeated path elements or SVG patterns with small curved strokes. Create a single feather shape using quadratic curves (Q), then repeat it with slight variations in position, rotation, and scale. For efficiency, define a pattern element and reference it with fill="url(#feather-pattern)".

<defs>
  <pattern id="feathers" width="10" height="15" patternUnits="userSpaceOnUse">
    <path d="M 5 0 Q 7 5, 5 10 Q 3 5, 5 0"
          stroke="black" fill="none" stroke-width="0.5"/>
  </pattern>
</defs>
<ellipse cx="100" cy="100" rx="40" ry="20" fill="url(#feathers)"/>

Use tolerance 0.5-1.0 for precision graphics, 1.5-2.5 for web graphics (60-80% size reduction), and 3.0+ for decorative elements. The Douglas-Peucker algorithm removes points that deviate less than the tolerance from a simplified line between their neighbors. Lower values preserve more detail.

// Using simplify-svg-path library
const simplified = simplifySVGPath(pathData, {
  tolerance: 2.0  // Good balance for web graphics
});

Use SVG transform attributes to mirror paths. Draw one wing with curves, then duplicate the path element and apply transform="scale(-1, 1)" to flip horizontally. Position the mirrored copy with translate(). This ensures perfect symmetry and reduces code.

<g id="wing-right">
  <path d="M 100 100 C 120 80, 140 70, 160 75" stroke="black" fill="white"/>
</g>
<use href="#wing-right" transform="scale(-1, 1) translate(-200, 0)"/>

Ensure control points form a straight line through connection points. For manual curves, if the previous curve's second control point is at (x1,y1) and the connection point is at (x0,y0), place the next curve's first control point at (2x0-x1, 2y0-y1). Or use S/T commands which do this automatically.

<!-- Manual smooth connection -->
<path d="M 0 50
         C 20 0, 40 0, 60 50
         C 80 100, 100 100, 120 50"   <!-- Control points aligned! -->
      stroke="black" fill="none"/>

<!-- Automatic smooth connection -->
<path d="M 0 50
         C 20 0, 40 0, 60 50
         S 100 100, 120 50"           <!-- S auto-reflects -->
      stroke="blue" fill="none"/>

Use polar coordinates with rotation transforms. Calculate angle increments (360°/number_of_spokes), then rotate a line element around the hub center. For 36 spokes: <line x1="100" y1="100" x2="100" y2="60" stroke="black" transform="rotate(10 100 100)"/> where each spoke rotates by 10° (360/36) increments around center point (100,100).

Use transform="scale(-1, 1)" to flip horizontally along the Y-axis. You must translate first to position correctly: <g transform="translate(200, 0) scale(-1, 1)"> flips everything inside the group. The translate accounts for the coordinate system flip, keeping the mirrored shape visible.

Use an involute spur gear generator (geargenerator.com) to export SVG, or manually create teeth using <path> with polar coordinates. For simple sprockets, approximate with rectangles rotated around the center: <rect x="48" y="-2" width="4" height="8" transform="rotate(30 50 50)"/> creates one tooth, repeat at angle increments (360°/tooth_count).

Draw concentric circles of decreasing radius using multiple <circle> elements centered at the same point. Example: <circle cx="100" cy="100" r="8" fill="#333"/> <circle cx="100" cy="100" r="5" fill="#666"/> creates a hub with dark outer ring and lighter center, simulating the axle and hub body.

Use transform="rotate(angle cx cy)" on a <line> element to tilt the seat post backward. Typical seat tube angles are 72-74°, so rotate -16 to -18° from vertical: <line x1="180" y1="80" x2="180" y2="120" stroke="black" stroke-width="4" transform="rotate(-16 180 80)"/> tilts the seat post backward from the top point.

Create a <line> for the crank arm from center to pedal position, then use transform="rotate(angle centerX centerY)" to position it. For a 170mm crank at 45°: <line x1="200" y1="200" x2="200" y2="230" stroke="black" stroke-width="5" transform="rotate(45 200 200)"/> rotates the crank around the bottom bracket center.

Draw two concentric circles: outer for tire edge, inner for rim. Use fill="none" with different stroke widths or create the gap with two circles: <circle cx="100" cy="100" r="45" fill="none" stroke="black" stroke-width="6"/> for tire, then <circle cx="100" cy="100" r="40" fill="none" stroke="black" stroke-width="2"/> for rim creates a visible tire-to-rim separation.

Use two <line> elements angled inward from the head tube to the front wheel axle. For a fork at 72° head angle: <line x1="250" y1="100" x2="260" y2="180" stroke="black" stroke-width="3"/> for left blade, mirror for right. The lines converge at the axle point (wheel center) creating the fork's triangular shape.

Draw a small rectangle or line extending radially from the rim using transform="rotate()" to position it. Example: <rect x="98" y="55" width="4" height="10" fill="black" transform="rotate(0 100 100)"/> creates a valve stem at 12 o'clock position on a wheel centered at (100,100) with r=45. Typically position at top or side of wheel.

The bottom bracket is the lowest central point where crank arms attach. Position it at the intersection of the down tube and seat tube, typically below the seat tube: <circle cx="200" cy="200" r="6" fill="#333"/> marks the center. All crank arm rotations and chain paths originate from this point's coordinates (cx, cy).

SVG uses the painter's model where elements are painted in DOM order - later elements paint over earlier elements. There is no z-index property; to change layering, you must reorder the DOM elements themselves. Elements appearing later in the SVG markup will appear on top of earlier elements.

<!-- Bird appears on top of bicycle (painted last) -->
<svg>
  <g id="bicycle">...</g>
  <g id="pelican">...</g>  <!-- This renders on top -->
</svg>

The viewBox defines a coordinate system that scales to fit the SVG's actual width/height. If viewBox="0 0 100 100" but the SVG is width="500" height="500", all coordinates scale 5x automatically. This allows you to design in a convenient coordinate system (like 0-100) that scales to any display size.

<!-- Design in 100x100 space, displays at 500x500 pixels -->
<svg width="500" height="500" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" />  <!-- Center circle in 100x100 space -->
</svg>

Use CSS @keyframes with the transform: rotate() property and set transform-origin to the rotation center. Apply the animation with animation: spin 2s linear infinite. Note that transform-origin in SVG requires absolute pixel values, not percentages, in some browsers.

<style>
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  .wheel {
    transform-origin: 100px 150px;
    animation: spin 2s linear infinite;
  }
</style>
<circle class="wheel" cx="100" cy="150" r="30" />

The transform-origin property sets the pivot point for CSS transforms (rotate, scale). In SVG, it requires absolute coordinates in user units (e.g., 100px 150px), not percentages like HTML. Firefox doesn't honor percentage-based origins in SVG. Always use the element's center coordinates as absolute values.

/* Correct: absolute coordinates */
.wheel {
  transform-origin: 100px 150px;
  transform: rotate(45deg);
}

/* Avoid: percentages unreliable in SVG */
.wheel {
  transform-origin: 50% 50%;  /* Inconsistent browser support */
}

SVG transforms modify the underlying coordinate grid, not the element's properties. A rectangle with width="20" and transform="scale(2)" still has width=20 logically, but renders 40 pixels wide because its coordinate system is scaled. This affects all children and stroke-widths too.

<!-- Width is still 20, but renders as 40px due to scaled coordinates -->
<rect width="20" height="10" stroke-width="1" transform="scale(2)" />
<!-- Stroke renders as 2px because coordinate system is 2x -->

Since SVG doesn't support z-index, you must reorder DOM elements using JavaScript. Use parentNode.appendChild(element) to move an element to the end (top layer) or parentNode.insertBefore(element, referenceElement) to place it at a specific position in the paint order.

// Move pelican to top layer (painted last)
const pelican = document.getElementById('pelican');
pelican.parentNode.appendChild(pelican);

// Place bicycle before pelican (underneath)
const bicycle = document.getElementById('bicycle');
const pelican = document.getElementById('pelican');
bicycle.parentNode.insertBefore(bicycle, pelican);

Use SVGO (SVG Optimizer) to automatically apply optimization techniques that reduce file size by 60-80% while maintaining quality. Key methods include: removing metadata/comments/hidden layers, minifying code by removing unnecessary whitespace, rounding numeric values to 2-3 decimal places instead of 6+, and combining duplicate paths. Install via npm (npm install -g svgo) and run svgo input.svg -o output.svg.

Round SVG coordinates to 2-3 decimal places instead of the default 6+ decimal places that design tools export. For example, change <path d="M123.456789,78.901234" to <path d="M123.46,78.90". This reduces file size by 30-40% without perceptible visual difference at typical screen resolutions. SVGO's floatPrecision option defaults to 3, which is optimal for web use.

Reduce the number of anchor points in paths by removing visually redundant points that don't affect the curve's appearance. Tools like SVGO's convertPathData plugin automatically simplify paths by converting curves to shorter equivalents (e.g., converting cubic Bézier to quadratic when possible) and removing duplicate/collinear points. You can also combine multiple identically-styled paths into a single path element.

Use role="img" on the <svg> element to ensure it's identified as a graphic by assistive technologies. While SVG has an implicit role of graphics-document, adding role="img" explicitly tells screen readers to treat it as a single image rather than announcing individual child elements. Combine with aria-labelledby pointing to <title> and <desc> element IDs for the accessible name and description.

Add a <title> element as the first child of <svg> for a short description (like alt text), and optionally a <desc> element after it for longer descriptions. Give each an id attribute, then reference them with aria-labelledby="titleID descID" on the <svg> element. Example: <svg role="img" aria-labelledby="pelican-title pelican-desc"><title id="pelican-title">Pelican riding bicycle</title><desc id="pelican-desc">A cartoon pelican pedaling a red bicycle</desc>...</svg>.

Add aria-hidden="true" to the <svg> element to hide it from assistive technologies. Do NOT use role="presentation" because it only removes the implicit role but doesn't hide the element—screen readers will still announce child elements. For decorative SVGs (pure visual ornamentation with no informational value), aria-hidden="true" is the correct approach and is supported across all modern screen readers.

Use inline <svg> for interactive/animated graphics (≤10 SVGs per page) to enable CSS/JavaScript control and reduce HTTP requests. Use <img src="file.svg"> for static icons (especially if reused across pages) to enable browser caching and keep DOM size small. For many repeated visits by the same users, <img> is faster due to caching. For single-page apps with few SVGs, inline is faster due to zero additional requests.

Create a svgo.config.mjs file in your project root to customize SVGO's default preset. You can disable specific plugins or modify their parameters. Example: export default { plugins: [{ name: 'preset-default', params: { overrides: { removeViewBox: false, floatPrecision: 2 } } }] }. Common tweaks: keep viewBox (needed for responsive), set floatPrecision (2-3 for web), and disable removeTitle/removeDesc (needed for accessibility).

Never rely solely on color to convey meaning—add text labels, patterns, or shapes as alternatives. WCAG 2.1 specifically warns against color-only differentiation. Ensure sufficient contrast ratios: 4.5:1 for normal text, 3:1 for large text and UI components. For data visualizations, use colorblind-friendly palettes (avoid red-green combinations) and provide pattern fills as alternatives to color coding.

Use background-image: url('image.svg') for purely decorative graphics that don't need accessibility or manipulation (e.g., patterns, textures, ornamental borders). CSS backgrounds are ideal for repeating patterns (background-repeat: repeat) and when you need CSS control over positioning/sizing without affecting the DOM. However, backgrounds are not accessible to screen readers, cannot be indexed by search engines, and cannot be manipulated with JavaScript.

Gzip compression reduces optimized SVG files by an additional 60-80% beyond SVGO optimization. For example, a 10KB optimized SVG might gzip to 2KB. Since SVG is XML text with repetitive patterns (tags, attributes), it compresses extremely well. Enable gzip/brotli compression on your web server (nginx, Apache, Cloudflare) to automatically compress SVG files during transmission. Brotli offers ~15-20% better compression than gzip for SVG.

Optimized SVGs improve two Core Web Vitals: First Contentful Paint (FCP) and Largest Contentful Paint (LCP). A 10KB optimized SVG vs 50KB unoptimized loads 5× faster on 3G connections, directly reducing FCP/LCP times. Inline SVG reduces LCP by eliminating the image request (no network round-trip), while <img> SVG can be preloaded (<link rel="preload" as="image" href="pelican.svg">) to improve LCP. Use responsive SVG with viewBox to avoid layout shifts (Cumulative Layout Shift).

Use the <g> (group) element to wrap multiple SVG elements, then apply transforms to the group itself. All children inherit the group's transformations, allowing you to move, rotate, or scale complex objects as one unit.

<g id="bicycle" transform="translate(100, 200) scale(1.5)">
  <circle id="front-wheel" cx="80" cy="0" r="30" />
  <circle id="back-wheel" cx="-80" cy="0" r="30" />
  <path id="frame" d="M -80,0 L 0,-40 L 80,0" />
</g>

The translate(tx, ty) function moves an element by tx units along the x-axis and ty units along the y-axis. Use transform="translate(50, 100)" to move an element 50 units right and 100 units down. If ty is omitted, it defaults to 0.

<!-- Move bicycle 200 units right, 150 units down -->
<g id="bicycle" transform="translate(200, 150)">
  <!-- bicycle parts here -->
</g>

Yes, transform order matters critically. Transforms are applied right-to-left in the attribute string. transform="translate(100, 50) rotate(45)" first rotates, THEN translates, which is different from transform="rotate(45) translate(100, 50)" which translates first, then rotates around the origin.

<!-- These produce DIFFERENT results -->
<rect transform="translate(50, 50) rotate(45)" />  <!-- Rotate, then move -->
<rect transform="rotate(45) translate(50, 50)" />  <!-- Move, then rotate -->

The viewBox attribute takes four values: min-x min-y width height. The first two define the top-left corner coordinate of the visible region, and the last two define the width and height of that region. viewBox="0 0 500 300" shows a 500x300 region starting at origin (0,0).

<!-- Show region from (0,0) to (500,300) -->
<svg viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg">
  <!-- Content uses 500x300 coordinate space -->
</svg>

Yes, <g> groups can be nested infinitely. Each nested group can contain other groups, shapes, or any SVG elements, allowing you to create complex hierarchical structures for organizing and transforming related elements together.

<g id="scene">
  <g id="bicycle">
    <g id="wheel">
      <circle cx="100" cy="150" r="30" />
    </g>
  </g>
</g>

Transforms cascade down the hierarchy multiplicatively. A child element's final transform is the combination of all ancestor transforms applied from outermost to innermost, then the element's own transform.

<g id="scene" transform="translate(200, 100)">
  <g id="bicycle" transform="scale(1.5)">
    <g id="wheel" transform="rotate(45 100 150)">
      <circle cx="100" cy="150" r="30" />
      <!-- Final: translate → scale → rotate → circle -->
    </g>
  </g>
</g>

Chain transforms with spaces in a single transform attribute: transform="translate(x, y) rotate(angle) scale(s)". They apply right-to-left: scale first, then rotate, then translate. Each transform operates on the coordinate system created by the previous one.

<!-- Scale to 1.5x, rotate 30°, then move to (100, 50) -->
<rect transform="translate(100, 50) rotate(30) scale(1.5)"
      width="50" height="30" />

Add a viewBox attribute with four values (min-x, min-y, width, height) to the <svg> element, and omit fixed width/height attributes (or set them to percentages). Example: <svg viewBox="0 0 800 600"> creates a coordinate system from (0,0) to (800,600) that scales to fit any container size. The browser automatically maintains aspect ratio and scales the SVG proportionally when the container resizes.

The viewBox attribute defines the position and dimension in user space of an SVG viewport. Its value is a list of four numbers: min-x, min-y, width, and height (e.g., viewBox="0 0 100 100"). These parameters establish the coordinate system for all elements inside the SVG, where min-x and min-y define the top-left corner origin, and width/height define the visible area dimensions. A negative value for width or height is invalid; a value of zero disables rendering.

The M (MoveTo) command lifts the "pen" and moves it to a new starting position without drawing a line. It takes two parameters: x and y coordinates (e.g., M 100 200). Uppercase M uses absolute coordinates relative to the SVG origin (0,0), while lowercase m uses relative coordinates from the previous point.

The L (LineTo) command draws a straight line from the current pen position to a specified endpoint. It takes two parameters: x and y coordinates (e.g., L 200 100). Uppercase L uses absolute coordinates, while lowercase l uses relative coordinates from the current position.

The C command draws a cubic Bezier curve with two control points. Syntax: C x1,y1 x2,y2 x,y where (x1,y1) is the first control point, (x2,y2) is the second control point, and (x,y) is the endpoint. The curve starts at the current pen position and bends toward both control points before reaching the endpoint.

The Z (or z) command closes the current path by drawing a straight line from the current position back to the first point of the path (typically from the initial M command). Case doesn't matter for Z - both uppercase and lowercase behave identically.

The circle element requires three attributes: cx (x-axis center coordinate), cy (y-axis center coordinate), and r (radius). Syntax example: <circle cx="50" cy="50" r="20"/> creates a circle centered at (50,50) with radius 20.

The ellipse element requires four attributes: cx (x-axis center), cy (y-axis center), rx (x-axis radius), and ry (y-axis radius). Syntax example: <ellipse cx="75" cy="75" rx="20" ry="5"/> creates a horizontal ellipse centered at (75,75) with width 40 and height 10.

The rect element requires four attributes: x (left edge position), y (top edge position), width, and height. Optional rx and ry attributes add rounded corners. Example: <rect x="10" y="10" width="100" height="100" rx="10" ry="10"/> creates a 100x100 rectangle at (10,10) with 10-unit rounded corners.

The fill attribute sets the interior color of an SVG shape. Default value is black if omitted. Values can be color names ("red"), hex codes ("#FF6347"), or "none" for transparent/hollow shapes. Example: <circle r="20" fill="#FF6347"/> creates a tomato-red filled circle.

The stroke attribute sets the outline color around an SVG shape's perimeter. Default value is none (no outline). Values can be color names, hex codes, or "none". Example: <circle r="20" fill="none" stroke="blue" stroke-width="2"/> creates a hollow circle with a 2px blue outline.

opacity controls transparency of the entire element (0=invisible, 1=opaque). fill-opacity controls only the fill transparency, and stroke-opacity controls only the stroke transparency. Example: <circle r="20" fill="red" stroke="blue" fill-opacity="0.5" stroke-opacity="1"/> creates a semi-transparent red fill with fully opaque blue outline.

For standalone .svg files, xmlns="http://www.w3.org/2000/svg" is required on the outermost <svg> element per SVG specification. For inline SVG in HTML5 documents served as text/html, xmlns is optional but recommended for compatibility. The value must be http (not https).