A Pocket Guide to Inline SVG: Fundamentals, Elements, and Usage

Scalable Vector Graphics (SVG) is an XML‑based language for describing two‑dimensional graphics that can be scaled without loss of quality. This guide focuses on inline SVG—embedding SVG code directly in HTML—to enable interaction, DOM access, and improved accessibility.

It explains how to insert SVG using methods such as inline markup, <img>, background images, <object>, or Data URIs, while emphasizing that inline SVG offers the most control for editing and accessing individual graphic parts.

The document lists common vector‑editing tools (Adobe Illustrator, Inkscape, Sketch, iDraw, WebCode) that can export SVG code for direct embedding.

Unnecessary SVG DOCTYPE, version, and namespace attributes are omitted for brevity; a minimal example is shown:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"></svg>

Key SVG elements are described: <svg> – the container defining canvas size via attributes like width, height, viewBox, and preserveAspectRatio. <g> – groups related graphics for collective transformation and accessibility. <use> – reuses defined elements via xlink:href. <defs> – defines reusable graphics that are not rendered directly. <symbol> – similar to <g> but creates its own coordinate system for later use with <use>.

SVG stacking order follows document order; later elements appear on top of earlier ones, as illustrated with grape and watermelon groups.

Basic shape elements are covered with examples: <rect> – rectangle (supports rx / ry for rounded corners). <circle> – circle defined by cx, cy, and r. <ellipse> – ellipse defined by cx, cy, rx, ry. <line> – straight line using x1, y1, x2, y2. <polyline> – open shape made of connected line segments. <polygon> – closed shape formed by connected lines.

The <path> element defines complex shapes via the d attribute. Command groups include:

Moveto ( M / m) – starts a new sub‑path.

Lineto ( L / l, H / h, V / v) – draws straight lines.

Closepath ( Z / z) – closes the current sub‑path.

Cubic Bézier ( C / c, S / s) – defines curves with two control points.

Quadratic Bézier ( Q / q, T / t) – defines curves with one control point.

Elliptical Arc ( A / a) – draws arc segments of an ellipse.

Sample path data is provided, for example a lime‑shaped path:

<svg width="258px" height="184px">
  <path fill="#7AA20D" stroke="#7AA20D" stroke-width="9" stroke-linejoin="round" d="M248.761,92c0,9.801-7.93,17.731-17.71,17.731...z" />
</svg>

Vector‑software‑generated SVG can be embedded directly; the guide shows a cherry illustration with grouped paths for stems, leaves, and fruit, demonstrating how to copy and paste optimized SVG code into HTML.

Accessibility tips include using <desc> and <title> elements to provide screen‑reader descriptions.

The guide concludes with acknowledgments to resources such as CSS‑Tricks, Lincoln Loop, Designmodo, Tahoe Partners, and Una Kravets, and provides the original source URL.