HTML Cheat Sheet
Cheat Sheets:

HTML Cheat SheetSVG Cheat Sheet

Load a demo or start drawing.
๐Ÿ”ผ SVG Editor

Basic StructureโŒจ๏ธ

The minimal structure of any SVG document. All SVG elements go inside the <svg> tag.

๐Ÿ“ Basic SVG Element with Width & Height

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="50" height="50" fill="red" />
</svg>

๐Ÿ” SVG with ViewBox (Scalable)

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

๐Ÿ“ฑ Responsive SVG with preserveAspectRatio

<svg width="100%" height="100%" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet">
  <text x="50" y="50" font-size="24">Hello SVG</text>
</svg>

This is the foundation of every SVG file. The <svg> element defines the canvas, and attributes like width, height, and viewBox control its size and scaling behavior.

Shapes๐Ÿ”ท

SVG shapes like rectangles, circles, and polygons. These are the building blocks of graphics.

๐ŸŸฅ Rectangle

<rect x="10" y="10" width="80" height="50" fill="skyblue" />

โšช Circle

<circle cx="60" cy="60" r="40" fill="orange" />

๐Ÿฅš Ellipse

<ellipse cx="80" cy="50" rx="60" ry="30" fill="pink" />

๐Ÿ“ Line

<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />

๐Ÿ”บ Polygon (Closed Shape)

<polygon points="50,5 100,100 0,100" fill="limegreen" />

๐Ÿ“ˆ Polyline (Open Shape)

<polyline points="0,40 40,40 40,80 80,80" fill="none" stroke="blue" stroke-width="2" />

SVG provides several basic shapes for building graphics: rectangles, circles, ellipses, lines, polygons, and polylines. These elements are easy to use and customize with color, stroke, and dimensions.

Path Commandsโœ๏ธ

Create complex shapes using the <path> element and the "d" attribute.

Rectangle Using Path

<path d="M10 10 H 90 V 90 H 10 Z" fill="lightgreen" />

Cubic Bezier Curve

<path d="M50 10 C 70 10, 70 40, 50 40" stroke="red" fill="none" />

Quadratic Bezier Curve

<path d="M20 80 Q 50 10, 80 80" stroke="blue" fill="none" />

Path Command Reference

  • M - move to
  • L - line to
  • H/V - horizontal/vertical line
  • C - cubic Bezier curve
  • S - smooth cubic curve
  • Q - quadratic Bezier curve
  • T - smooth quadratic curve
  • A - arc
  • Z - close path

The <path> element lets you draw custom shapes using a series of commands and coordinates. It's one of the most powerful SVG tools, allowing you to create curves, arcs, and complex figures.

Text & Fonts๐Ÿ”ค

Add and style text within your SVG using various font and layout options.

๐Ÿ“ Basic Text

<text x="10" y="40" font-size="20">Hello SVG</text>

๐ŸŽฏ Centered Text

<text x="50" y="50" text-anchor="middle" font-size="16">Centered</text>

๐Ÿงฉ Multi-line with <tspan>

<text x="10" y="20" font-size="14">
  Line 1
  <tspan x="10" dy="20">Line 2</tspan>
</text>

You can add editable text with the <text> element. Position it with x and y, align it using text-anchor, and style it using font properties or child <tspan> tags.

Colors & Fills๐ŸŽจ

Control the visual appearance using fill, stroke, gradients, and patterns.

๐ŸŽจ Fill and Stroke

<circle cx="50" cy="50" r="40" fill="gold" stroke="black" stroke-width="3" />

๐ŸŒˆ Linear Gradient

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="red" />
    <stop offset="100%" stop-color="yellow" />
  </linearGradient>
</defs>
<rect x="10" y="10" width="100" height="100" fill="url(#grad1)" />

๐Ÿงต Pattern Fill

<defs>
  <pattern id="dots" width="10" height="10" patternUnits="userSpaceOnUse">
    <circle cx="5" cy="5" r="2" fill="black" />
  </pattern>
</defs>
<rect width="100" height="100" fill="url(#dots)" />

Use fill and stroke to color your shapes, or apply gradients and patterns by referencing url(#id). Gradients allow smooth transitions between colors, while patterns tile repeating elements.

Transforms๐Ÿ”„

Move, rotate, and scale elements with the transform attribute.

๐Ÿ“ฆ Translate (Move)

<rect x="0" y="0" width="50" height="50" fill="blue" transform="translate(50,30)" />

๐Ÿ” Rotate

<rect x="50" y="20" width="60" height="30" fill="green" transform="rotate(45 80 35)" />

๐Ÿ” Scale

<circle cx="50" cy="50" r="20" fill="orange" transform="scale(1.5)" />

โ›“๏ธ Multiple Transforms

<rect width="50" height="50" fill="purple" transform="translate(20,20) rotate(45)" />

Use the transform attribute to translate (move), rotate, or scale elements. Transformations are applied in the order they appear. Coordinates in rotation use the syntax rotate(angle cx cy).

Ads๐Ÿ“ฃ

We show ads to support this free website.

Filters๐Ÿงช

Use SVG filters to apply blur, shadow, and other visual effects.

๐Ÿ’จ Gaussian Blur

<defs>
  <filter id="blur">
    <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
  </filter>
</defs>
<circle cx="60" cy="60" r="40" fill="blue" filter="url(#blur)" />

๐ŸŒซ๏ธ Drop Shadow

<defs>
  <filter id="shadow">
    <feDropShadow dx="4" dy="4" stdDeviation="3" flood-color="gray" />
  </filter>
</defs>
<rect x="20" y="20" width="80" height="60" fill="orange" filter="url(#shadow)" />

๐ŸŽจ Color Matrix (Grayscale)

<defs>
  <filter id="grayscale">
    <feColorMatrix type="matrix"
      values="0.33 0.33 0.33 0 0
              0.33 0.33 0.33 0 0
              0.33 0.33 0.33 0 0
              0    0    0    1 0" />
  </filter>
</defs>
<image href="photo.jpg" x="0" y="0" width="200" filter="url(#grayscale)" />

Filters let you apply visual effects like blur, shadow, and color transformations. Define a filter in <defs>, then apply it to any shape using filter="url(#id)".

Animation๐ŸŽฌ

Animate shapes, colors, or transforms using SVG's native animation elements.

๐ŸŸ  Animate Position

<circle cx="20" cy="50" r="10" fill="tomato">
  <animate attributeName="cx" from="20" to="120" dur="2s" repeatCount="indefinite" />
</circle>

๐ŸŒˆ Animate Fill Color

<rect x="20" y="20" width="60" height="60">
  <animate attributeName="fill" values="red;blue;green" dur="3s" repeatCount="indefinite" />
</rect>

๐Ÿ” Animate Rotation

<rect x="50" y="50" width="40" height="40" fill="purple">
  <animateTransform attributeName="transform" type="rotate"
    from="0 70 70" to="360 70 70" dur="4s" repeatCount="indefinite" />
</rect>

SVG has built-in animation support using <animate> and <animateTransform>. You can animate any attribute, such as position, color, or rotation, over time.

Interactivity๐Ÿ–ฑ๏ธ

Make your SVG elements interactive with mouse events and JavaScript.

๐Ÿ–ฑ๏ธ Inline Click Event

<circle cx="60" cy="60" r="40" fill="lightblue" onclick="alert('You clicked the circle!')" />

๐Ÿง  JavaScript Event Listener

<svg id="htmlcheatsheet" width="100" height="100">
  <rect id="box" x="10" y="10" width="80" height="80" fill="tomato" />
</svg>
<script>
  document.getElementById("box").addEventListener("click", () => {
    alert("Box clicked!");
  });
</script>

๐Ÿ” CSS Hover Effect

<style>
  circle:hover {
    fill: gold;
    cursor: pointer;
  }
</style>
<circle cx="50" cy="50" r="30" fill="gray" />

SVG supports interactivity through HTML-style events like onclick or by attaching listeners in JavaScript. You can also use CSS for hover effects and transitions.

Ads๐Ÿ“ฃ

We show ads to support this free website.

Use & Reuseโ™ป๏ธ

Define reusable shapes with <symbol> and reference them using <use>.

๐Ÿ“ฆ Define a Symbol

<svg style="display:none;">
  <symbol id="star" viewBox="0 0 100 100">
    <polygon points="50,5 61,35 95,35 68,57
                     78,91 50,70 22,91 32,57
                     5,35 39,35" fill="gold" />
  </symbol>
</svg>

๐Ÿ”— Reuse with <use>

<svg width="100" height="100">
  <use href="#star" x="0" y="0" />
  <use href="#star" x="110" y="0" fill="blue" />
</svg>

Use <symbol> inside a hidden SVG to define reusable elements, then display them with <use href="#id">. You can position and style each instance independently.

Accessibilityโ™ฟ

Add semantic tags and attributes to make your SVGs screen reader friendly.

๐Ÿ“ Title and Description

<svg role="img" aria-labelledby="title desc" width="100" height="100">
  <title id="title">Warning Icon</title>
  <desc id="desc">A triangle with an exclamation mark</desc>
  <polygon points="50,5 95,95 5,95" fill="yellow" stroke="black" />
  <text x="50" y="75" font-size="40" text-anchor="middle" fill="black">!</text>
</svg>

๐Ÿ™ˆ Hide from Assistive Tech

<svg aria-hidden="true" focusable="false">
  <circle cx="50" cy="50" r="40" fill="gray" />
</svg>

Use <title> and <desc> for screen reader context. The aria-labelledby attribute connects them. To hide decorative SVGs, use aria-hidden="true" and focusable="false".

Embedding & Responsiveness๐ŸŒ

Embed SVG in different ways and make it scale with screen size.

๐Ÿงฉ Inline SVG

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

๐Ÿ–ผ๏ธ SVG as Image

<img src="icon.svg" alt="Example Icon" width="100" height="100" />

๐ŸŽฏ CSS Background

div {
  background-image: url('icon.svg');
  width: 100px;
  height: 100px;
}

๐Ÿ“ฑ Responsive SVG

<svg viewBox="0 0 100 100" width="100%" height="auto">
  <rect width="100" height="100" fill="lightblue" />
</svg>

You can embed SVG inline in HTML, as an image, or as a CSS background. Use viewBox and percentage-based sizing to make SVGs responsive across screen sizes.

Tools & Resources๐Ÿงฐ

Helpful online tools for editing, optimizing, converting, and inspecting SVG files.

๐Ÿงผ Optimizers

  • SVGOMG โ€“ Clean and minify SVGs with live preview
  • Vecta Nano โ€“ Simple drag-and-drop SVG minifier

โœ๏ธ Editors & Viewers

๐Ÿ› ๏ธ Converters & Generators

๐Ÿงช Testing & Inspecting

  • SVG Viewer โ€“ View, inspect, and copy raw SVG code
  • CodePen โ€“ Experiment with SVG interactively in HTML/CSS/JS

These tools help you simplify, clean, debug, convert, or interactively create SVG graphics. Most of them run entirely in the browser and are free to use.

↘
HTML
CSS
Apply CSS
Preview

SVG CheatSheet with Interactive Editor

The all-in-one free online SVG tool with code examples, interactive WYSIWYG and code editor with live preview, code optimizer, tutorial and much more. Scalable Vector Graphics make websites more awesome, make sure to use them for small images and animations! ๐ŸŽจ Whether you're designing a game, a website, or just playing with code, this SVG CheatSheet and its live editor will help you draw shapes and pictures using nothing but clean code.

What is an SVG?

SVG stands for Scalable Vector Graphics. It's a way to draw shapes using code, and the cool part is:

We use SVG images in lots of places:

Examples

Using SVG as an Image

<img src="star.svg" alt="A star icon" width="100" height="100" />

Inline SVG in HTML

<svg width="100" height="100">
 <circle cx="50" cy="50" r="40" fill="orange" />
</svg>
<svg width="200" height="100">
 <rect x="10" y="10" width="180" height="80" fill="skyblue" stroke="black" />
</svg>

The latter draws a rectangle that's 180 pixels wide and 80 pixels tall, with a skyblue fill and black border. You can also draw:

Shape Code What it Does
Circle 
<circle cx="50" cy="50" r="30" />
 A circle with radius 30 pixels
Line 
<line x1="0" y1="0" x2="100" y2="100" />
 A straight line from top-left to bottom-right
Polygon 
<polygon points="50,5 95,100 5,100" />
 A triangle polygon

๐Ÿ“‹ What's in This CheatSheet?

This SVG CheatSheet is divided into colorful panels that explain different parts:

โš™๏ธ How to use the Interactive Editor?

The Interactive SVG Editor with live code preview is a powerful online tool that combines drawing with live coding. Click the pencil icon assigned to each code example in this cheatsheet to preview it in the "what you see is what you get" editor.

With this editor, you can:

The editor consists of three core panels:

  • Interactive Drawing Panel where you draw shapes with tools and interact with elements
  • Code Editor Panel to or edit raw SVG code with syntax highlighting

๐Ÿ› ๏ธ Tools & Toolbar Buttons

Located at the top of the left visual panel, the toolbar provides tools to draw and manipulate SVG elements.

Icon Tool Description
๐Ÿ‘† Select Move and resize shapes manually
โœ๏ธ Freehand Draw freely by dragging the mouse
โž– Line Click to create straight lines
โฌœ Rectangle Click and drag to draw rectangles
โญ• Circle Click and drag to draw circles
๐Ÿ”ท Polygon Click multiple times to add points, then close
๐Ÿ“ Point Edit Edit individual anchor points of shapes
๐Ÿ—‘๏ธ Delete Click a shape to remove it
โ†ถ โ†ท Undo / Redo Step backward or forward through your changes
๐ŸŽจ Color Picker Set fill/stroke color of new shapes
โ–“ Thickness Picker Set line thickness (stroke width)

๐Ÿงช How to Use These?

Drawing Shapes

  1. Select a drawing tool (e.g. Circle โญ•).

  2. Select color and thickness

  3. Click (but don't drag) in the left panel to create sahpes. For a line click the starting and end points.

  4. Use the Select ๐Ÿ‘† tool to move or resize them.

Editing Points

Freehand Sketching

Code Editing

๐Ÿงน Extra Features

Feature What It Does
Optimize Cleans up the code, removes unnecessary data, reduces file size
Undo/Redo Step through your history without losing work
Erase All Clears the entire canvas and code editor
Share SVG Generates a shareable URL with your SVG code embedded
Minimize Editor Collapses the editor to a Windows-style bar at the bottom of the screen

๐Ÿงช Load Ready-Made Examples

You'll also find a list of ready-made SVG demos just above the interactive panel. Click on:

๐Ÿš€ Rocket | ๐ŸŒณ Tree | ๐ŸงŠ Cube | ๐Ÿค– Robot ...and many more to load example SVGs or from the cheat sheet.

๐Ÿ” Linked Editors & Auto-Update

The SVG code editor and drawing panel are linked:

SVG Path Example

<path d="M10 10 H 90 V 90 H 10 Z" fill="lightgreen" />

This draws a rectangle using "path commands" like M (move), H (horizontal), V (vertical), and Z (close).

Useful Tips

๐ŸŽ‰ Start Creating!

This cheat sheet is here to help you learn by doing. Click around, load the demos in the interactive editor, use the panels, test shapes, and build your own SVG art or animation.

HTML Cheat Sheet is using third party cookies to show personalized ads and track anonymous visitor analytics. | PDF | Terms and Conditions, Privacy Policy
© HTMLCheatSheet.com
➤