HTML/CSS - 24

HTML/CSS - 24: SVG Icons & Graphics

SVG stands for Scalable Vector Graphics. Unlike a normal image file made from pixels, an SVG is built from shapes, lines, and coordinates.

Because SVG graphics are vector-based, they can grow or shrink without becoming blurry. They are especially useful for icons, simple illustrations, diagrams, and interface graphics.

Inline SVG can be written directly inside your HTML, which means you can also style parts of it with CSS.

Your challenge: Build a simple icon using SVG shapes, then change its size, color, and hover effect with CSS.

What should you notice?

The <svg> element creates a drawing area. Inside it, individual SVG elements create the actual shapes.

The example starts with a circle: <circle cx="50" cy="50" r="35">

The cx and cy values control the center of the circle, while r controls its radius.

What does viewBox do?

The rule: viewBox="0 0 100 100" creates a coordinate system that runs from 0 to 100 across and from 0 to 100 down.

The SVG can then be displayed at many different physical sizes while keeping the same internal coordinates.

That is one reason SVG graphics scale so well.

Experiment with the circle:

Change: r="35" to: r="20"

The circle should become smaller while remaining centered.

Then try changing cx or cy and notice how the circle moves inside the SVG area.

Add another shape:

Inside the SVG, try adding: <rect x="35" y="35" width="30" height="30"></rect>

This creates a rectangle using an x and y starting position, plus a width and height.

Try a line:

You can also add: <line x1="25" y1="50" x2="75" y2="50"></line>

The first pair of coordinates marks one end of the line, and the second pair marks the other.

Stroke vs. fill:

The stroke controls the outline of a shape. The fill controls the area inside it.

For example: fill="none" keeps the inside transparent.

Try changing it to: fill="#111" and see what happens.

Why use currentColor?

The example uses: stroke="currentColor"

This tells the SVG to use the current CSS text color. Because the icon has a CSS color value, the SVG stroke can follow that same color automatically.

That makes an icon easier to reuse in different parts of a design.

Try the hover effect:

Move the pointer over the graphic. The CSS class .icon gives the SVG the same kinds of transition and transform effects you have already used on normal HTML elements.

Build a simple symbol:

Try combining one circle and two lines to invent your own symbol. You do not need to create a recognizable real-world logo. The goal is to understand how SVG shapes share the same coordinate system.

Accessibility tip:

If an SVG is purely decorative, it can often be hidden from assistive technology with: aria-hidden="true".

If the graphic communicates important information, it should have an accessible description instead of relying only on its appearance.

Good SVG habit: Use SVG for graphics that benefit from clean scaling, such as icons and simple illustrations. Normal image formats are still useful for photographs and other highly detailed images.

<style>

  .icon {
    width: 140px;
    height: 140px;
    color: #8A8A8A;

    transition:
      transform 0.3s ease,
      filter 0.3s ease;
  }

  .icon:hover {
    transform: scale(1.15) rotate(8deg);
    filter: drop-shadow(0 0 12px currentColor);
  }

</style>

<svg
  class="icon"
  viewBox="0 0 100 100"
  fill="none"
  stroke="currentColor"
  stroke-width="6"
  aria-label="Simple compass-style symbol"
  role="img">

  <circle
    cx="50"
    cy="50"
    r="35">
  </circle>

  <line
    x1="50"
    y1="25"
    x2="50"
    y2="75">
  </line>

  <line
    x1="25"
    y1="50"
    x2="75"
    y2="50">
  </line>

</svg>