Design a real logo with code, not Photoshop.

SVG stands for Scalable Vector Graphics. Instead of a grid of colored dots (that's what a photo — a JPG or PNG — is), an SVG is a set of instructions: "draw a circle here, this big, this color." Because it's instructions instead of dots, it looks perfectly sharp whether it's the size of an app icon or printed on a billboard. That's why real logos are made this way.

Every SVG starts the same way — an <svg> tag with a viewBox, which is just the coordinate grid you're drawing on.

<svg viewBox="0 0 200 200">
  <circle
    cx="100"
    cy="100"
    r="80"
    fill="#4C8FD6"
  />
</svg>

cx and cy are the center point. r is the radius (how far the circle reaches from its center). fill is the color — you can use a name like "blue" or a hex code like "#4C8FD6" for exact control.

Try it: change r="80" to r="40". Then change the fill to your favorite color's hex code. Google "hex color picker" if you need one.

Here's the one rule that unlocks everything: shapes stack in the order you write them, like sheets of paper. The first shape you write is on the bottom. The last one is on top, covering whatever's underneath it.

A badge is just circles, smaller and smaller, stacked on top of each other:

<svg viewBox="0 0 200 200">
  <!-- biggest circle first -->
  <circle cx="100" cy="100"
    r="90" fill="#D9892B"/>
  <circle cx="100" cy="100"
    r="74" fill="#2CA79B"/>
  <circle cx="100" cy="100"
    r="58" fill="#1C2B3A"/>
  <!-- smallest circle last, sits on top -->
  <circle cx="100" cy="100"
    r="48" fill="#4C8FD6"/>
</svg>

That's already a badge. Every ring you see in a real emblem — a varsity patch, a coin, a record label stamp — is this exact trick, just with more rings and more care in the color choices.

Try it: reorder the circles — put the smallest one first. Watch it disappear behind the bigger ones. That's the stacking rule in action.

Circles and rectangles only get you so far. For anything else — a shield, a star, a stop-sign shape — you use <polygon>, which just connects a list of points with straight lines and fills in the shape.

Each point is an x,y pair. Here's an octagon — 8 points spaced evenly around a circle:

<polygon points="
  127,52 173,66 187,113
  173,159 127,173 80,159
  66,113 80,66"
  fill="#E15A2C"
/>

You don't need to hand-calculate those points from scratch — that's genuinely tedious even for professionals. Most people either eyeball it, trace over a shape in a free tool like Inkscape, or (once you're a little further along) write a few lines of code that calculates evenly-spaced points around a circle for you. For now, copy the points above and just change the color. You've got a badge shape.

💡 An octagon reads instantly as "stop sign" to anyone's brain — that's visual shorthand. Good logo design is often about borrowing shapes people already understand and putting your own spin on them.

A flat fill looks fine. A gradient — color that fades from one shade to another — is what makes something look shiny, rounded, or metallic. You define the gradient once up in a <defs> block (short for "definitions"), give it an ID, then reference that ID anywhere you'd normally put a color.

<svg viewBox="0 0 200 200">
 <defs>
  <linearGradient id="gold"
   x1="0%" y1="0%"
   x2="100%" y2="100%">
   <stop offset="0%"
    stop-color="#FFF6C8"/>
   <stop offset="100%"
    stop-color="#8E6414"/>
  </linearGradient>
 </defs>

 <circle cx="100" cy="100" r="85"
  fill="url(#gold)" />
</svg>

Notice the fill="url(#gold)" — that #gold matches the id="gold" from the gradient definition. That link is how SVG connects the two. Miss the # and it silently breaks, so it's a common first bug — check that first if a gradient doesn't show up.

Try it: add a third <stop> in the middle at offset="50%" with a bright white-ish color. That's the trick behind the "polished metal" look — light, dark, light again.

That classic look where words curve around the top of a badge or coin? SVG can put text on any path, including an invisible curved line. First you draw a path (usually invisible), give it an ID, then tell your text to follow it.

<svg viewBox="0 0 200 200">
 <defs>
  <!-- an invisible curved line -->
  <path id="curve"
   d="M 20,100 A 80,80 0 1,1 180,100" />
 </defs>

 <text font-size="26" fill="#1C2B3A">
  <textPath href="#curve"
   startOffset="50%" text-anchor="middle">
   YOUR NAME
  </textPath>
 </text>
</svg>

The d="M 20,100 A 80,80..." part is what's called an arc command — it's the most intimidating-looking line in this whole guide, and the truth is almost nobody memorizes it. Keep this exact line as a template, change the numbers slightly, reload, and see what moved. That trial-and-error loop is the normal way to work with arcs, even for people who've been doing this for years.

⚠️ If your curved text comes out upside-down, that's not a mistake — it just means the invisible path is curving the "wrong" way for your text. Flip the two numbers right before the final 1,1 to 1,0 and it'll flip the direction.

Filters are SVG's special effects. The easiest and most useful one is feDropShadow — one line gives any shape a soft shadow, instantly making it feel like it's sitting above the page instead of flat on it.

<defs>
 <filter id="shadow">
  <feDropShadow
   dx="0" dy="6"
   stdDeviation="6"
   flood-opacity="0.4" />
 </filter>
</defs>

<circle ... filter="url(#shadow)" />

dx/dy move the shadow sideways/down. stdDeviation controls how blurry it is — bigger number, softer shadow. Want a neon glow instead of a shadow? Same idea, but you blur a bright color and keep the original shape on top — that's exactly how the glowing rings in the night-mode badge later in this project were built.

Try it: change dy to a negative number. The shadow moves above the shape instead of below — useful for effects, but usually not what you want for a normal drop shadow.

Real brands don't design one logo — they design a system: the same mark in black-and-white, in the brand colors, in a holiday version, on a dark background. The lazy way is copy-pasting your whole file and manually editing every color. The smart way is CSS variables: define your colors once at the top, and reuse them everywhere by name.

<style>
 :root {
   --main: #4C8FD6;
   --accent: #D9892B;
 }
 .ring { fill: var(--main); }
 .dot  { fill: var(--accent); }
</style>

<circle class="ring" ... />
<circle class="dot" ... />

Now to make a whole new color version of your logo, you change two lines at the top instead of hunting through every shape. This is exactly how the nine different color palettes for the badge in this project were built from one shared design — swap the variables, get a whole new mood.

💡 This idea — write it once, reuse it everywhere — is one of the most important ideas in all of programming, not just design. It's usually called "DRY": Don't Repeat Yourself.

A logo that only exists on your laptop doesn't do anything. Here's how to take it the rest of the way:

1. Save the file. End the filename in .svg (not .html) once you're just saving the artwork itself, no page around it. Any browser can open an .svg file directly.

2. Test it small and big. A logo has to work as a tiny profile picture and as a huge print on a hoodie. Zoom your browser out to 25% and back to 300% — if it still reads clearly at both ends, you're good. If small text disappears, make it bigger or simpler.

3. Know the one gotcha with fonts. If you used a font from Google Fonts, it only shows up correctly when the file is opened somewhere with internet access, because the font loads from the web. For printing on merch, most print shops will ask you to "convert text to outlines" first — free tools like Inkscape can do this in one click, and it locks the letter shapes in permanently so the font is never needed again.

4. Where it can go from here: upload it to Canva to mock it up on a t-shirt, drop it into Redbubble or Printful to sell actual merch, use it as your profile picture, or hand it straight to a screen printer. A vector file is the format every single one of those places asks for — you built the exact thing they need.

💡 Keep every version you make, even the ones you don't use. Design work is never wasted — today's rejected draft is next month's better idea.

Reading is step one. You actually learn this by breaking things and fixing them. Pick a challenge and go — there's no wrong answer, only a badge nobody else has.

Everything here is free to keep exploring, no account or payment needed:

MDN Web Docs — the official, most trustworthy reference for every SVG tag and attribute that exists. Search "MDN SVG" plus whatever tag you're curious about.

freeCodeCamp — free, structured coding courses, including HTML/CSS which everything in this guide builds on.

Your browser's "View Page Source" — right-click any website and look at its code. Every logo, every layout — someone wrote it, and you can read exactly how.

💡 The badge used as the example throughout this whole guide went through dozens of drafts before landing anywhere close to final — different fonts, different colors, scrapped ideas, redone from scratch more than once. That's not a sign something went wrong. That's just what making something good actually looks like.