Create an SVG from Scratch: A Three-Shape Badge

You can draw this small notebook badge with three elements: a rounded rectangle, a triangular path and a circle. Because each value is written directly, changing its exact fill or position is straightforward.

A generated concept is useful when you want a different visual interpretation. This exercise includes both routes and their actual files, so you can choose the method that fits the job.

Save a complete SVG file

Create three-shape-badge.svg in a text editor and save it as plain text with the following content:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 28"
     role="img" aria-labelledby="badge-title">
  <title id="badge-title">Notebook badge with a compass needle</title>
  <rect x="4" y="2" width="16" height="24" rx="3" fill="#18345F" />
  <path d="M8 21 17 6 14 20Z" fill="#F97316" />
  <circle cx="12.5" cy="16" r="1.7" fill="#18345F" />
</svg>

Open the file in a browser. You can also download the prepared badge, which uses the same three shape definitions with a descriptive title.

The viewBox describes a coordinate rectangle 24 units wide and 28 units high. The rectangle begins at x=4, y=2; its width of 16 leaves four units on either side. The circle is drawn after the orange path, so it covers that part of the needle with navy.

Change one value and look again

Change the rectangle's rx from 3 to 0 to remove its rounded corners. Restore it, then change the orange fill to #0F766E. These edits affect the specific attributes you changed; they do not require another generated interpretation.

For the path, M8 21 moves to the first point. The following coordinate pairs form line segments because they follow the initial move command. Z closes the triangle. Keep the original open beside the edited file if you want to see the effect of moving one point.

A color value is valid in SVG, but color and fill have different jobs. A literal fill paints the shape directly. fill="currentColor" can follow a CSS color; the working icon guide demonstrates that behavior.

Compare a generated interpretation

To explore a different shape, the same fictional notebook idea was tried in the SVG creator dashboard on September 14, 2026. Classic, one SVG and transparent background were selected; the displayed generation cost was two credits.

The prompt requested a rounded navy bookmark containing an orange compass needle, centered with padding, without lettering, gradients, shadows or texture.

The downloaded generated SVG has three paths and more detailed coordinates. It is not the same artwork as the manually coded badge. Open the side-by-side comparison to inspect both.

The generated fills are close to the requested colors but not exact. Its shape and framing also differ from the hand-coded badge. That makes generation a source of visual options, while the three-shape file remains easy to adjust precisely.

Put the badge in a page

<img src="three-shape-badge.svg" width="24" height="28"
     alt="Notebook badge with a compass needle">

Use an empty alt when the image is purely decorative beside equivalent visible wording. When an icon is the only content of a button or link, give that control a name describing what it does.

If you set both CSS width and height, keep the intended proportions in mind. The generated source's preserveAspectRatio="none" can stretch its artwork in a wide box; the five file checks show the actual example and a manual correction.

Troubleshoot the file you saved

If the browser shows text instead of the picture, check that the filename ends in .svg, not .svg.txt. If a shape is missing, check its coordinates against the viewBox and make sure its fill is visible on the background. If the XML cannot be parsed, inspect quotes and closing tags.

For more structural detail, read the SVG file-format guide. Keep this small source as an editable exercise, and use the generated example when exploring a less predictable visual direction is the useful next step.