logoredraws.com

How to Use Gradients in SVG

Learn how SVG gradients work, how to apply linear and radial gradients to logo and favicon artwork, and how to check the result before delivery.

Published

Contents
  1. The essential answer in code
  2. The parts of an SVG gradient
  3. Step by step: adding a gradient to a logo mark or favicon
  4. One gradient per shape, or one across the whole logo
  5. Radial gradients
  6. Gradients at favicon sizes
  7. Common problems and how to avoid them
  8. Verify the result

To use a gradient in SVG, define a linearGradient or radialGradient element, usually inside a defs block, and give it a unique id. Describe its colors with stop elements, then apply it to a shape by setting that shape's fill or stroke to url(#your-id). The gradient is not drawn by itself. It works as a paint server, which is the SVG term for a reusable paint definition that shapes refer to, the same way they would refer to a flat color.

The essential answer in code

The snippet below is a minimal favicon-style mark: a rounded square filled with a diagonal two-color gradient. The hex colors are placeholders, so replace them with your brand values. If you save this as a standalone .svg file, the root svg element must also declare the SVG namespace with the xmlns attribute. Browsers can ignore or misread standalone files that lack it.

<svg viewBox="0 0 32 32">
  <defs>
    <linearGradient id="brand-fade" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#ff6a00"/>
      <stop offset="1" stop-color="#7a00ff"/>
    </linearGradient>
  </defs>
  <rect width="32" height="32" rx="6" fill="url(#brand-fade)"/>
</svg>

The parts of an SVG gradient

Element or attribute | What it controls
linearGradient | Color changes along a straight line from the point x1,y1 to the point x2,y2.
radialGradient | Color changes outward from a center (cx, cy) to a radius (r). The optional focal point (fx, fy) moves where the first color starts.
stop | One color position. offset sets where it sits (0 to 1, or a percentage), stop-color sets the color, and stop-opacity sets transparency.
gradientUnits | objectBoundingBox (the default) measures coordinates as fractions of each shape's own bounding box. userSpaceOnUse measures them in the drawing's coordinate system, set by the viewBox.
spreadMethod | What happens beyond the gradient's ends: pad (default, extends the end colors), reflect, or repeat.
gradientTransform | Rotates, scales or skews the gradient without changing the shape.
href | Lets one gradient reuse the stops of another. Older files use xlink:href for this.

Step by step: adding a gradient to a logo mark or favicon

  • 1. Start from clean vector artwork. Convert text to outlines and make sure the mark is built from paths and basic shapes, not an embedded bitmap.
  • 2. Set a viewBox that tightly fits the mark. For a favicon, a square viewBox keeps the icon centered in browser tabs.
  • 3. Add a defs block and create the gradient with a short, distinctive id. Brand-specific names such as acme-mark-gradient reduce the risk of clashing with other ids on a page.
  • 4. Add at least two stop elements and set their offset and stop-color values.
  • 5. Choose the gradient direction. With default units, x1=0 y1=0 x2=1 y2=0 runs left to right and x2=0 y2=1 runs top to bottom.
  • 6. Apply the gradient by setting fill or stroke to url(#id) on each shape that should use it.
  • 7. Decide whether separate shapes should each get their own gradient or share one continuous sweep (see the next section).
  • 8. Save the file, then check it with the verification steps at the end of this guide.

This is the most common source of unexpected results. With the default objectBoundingBox units, the gradient is stretched to fit each shape's own bounding box. A logo made of three separate letters therefore shows three separate fades, each starting over at its own left edge. To make one continuous gradient run across every part of the mark, set gradientUnits to userSpaceOnUse and give coordinates in the same units as the viewBox.

<svg viewBox="0 0 120 40">
  <defs>
    <linearGradient id="mark-sweep" gradientUnits="userSpaceOnUse"
                    x1="0" y1="0" x2="120" y2="0">
      <stop offset="0" stop-color="#0057ff"/>
      <stop offset="1" stop-color="#00c2a8"/>
    </linearGradient>
  </defs>
  <g fill="url(#mark-sweep)">
    <path d="M5 35 L20 5 L35 35 Z"/>
    <rect x="45" y="5" width="30" height="30"/>
    <circle cx="100" cy="20" r="15"/>
  </g>
</svg>

There is also a related edge case. A shape whose bounding box has zero width or zero height, such as a perfectly horizontal line, cannot use a gradient in objectBoundingBox units. The SVG specification says the gradient is not rendered in that situation. Switching to userSpaceOnUse fixes it.

Radial gradients

A radial gradient suits glows, soft highlights and spherical shading. With default units, cx, cy and r are fractions of the shape's bounding box, so cx=0.5 cy=0.5 r=0.5 centers the gradient and reaches the box edges. Moving fx and fy off center makes the highlight look like it comes from one side.

<radialGradient id="mark-glow" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.3">
  <stop offset="0" stop-color="#ffffff"/>
  <stop offset="1" stop-color="#1a3cff"/>
</radialGradient>

Gradients at favicon sizes

Nothing in SVG stops a favicon from using gradients. Whether they help is a design judgment, not a technical requirement. Browsers often show favicons very small, and at that size a subtle gradient can blend into a single muddy color or weaken the contrast between the mark and its background. A practical approach is to keep the gradient's end colors clearly distinct, make sure the silhouette reads even without the gradient, and consider a simpler flat version for the smallest sizes.

Browser support for SVG favicons varies, so sites commonly also provide raster fallbacks such as PNG or ICO files. In the HTML, an SVG favicon is referenced with a link element that has rel set to icon and type set to image/svg+xml. The supplied material includes no current browser-support data, so check present support for the browsers your audience uses before relying on the SVG alone.

Common problems and how to avoid them

  • Duplicate ids: if several inline SVGs on one page use the same gradient id, a shape can pick up the wrong gradient. Give every gradient a unique id.
  • Hidden definitions: if a gradient sits inside an SVG hidden with display:none, some browsers fail to render shapes elsewhere that reference it. Hide such sprite sheets by giving them zero size, not with display:none.
  • Unsupported gradient types: mesh or freeform gradients from design applications are not part of the SVG paint model that browsers render natively. Exporters may rasterize them, approximate them with many shapes, or depend on scripts, so inspect what was actually exported.
  • Optimizer changes: SVG optimization tools may rename ids or merge definitions. Check that references still match after optimizing.
  • Embedded bitmaps: a file ending in .svg can still contain an image element holding raster data. The extension alone does not prove the artwork is fully vector or editable. It also does not grant permission to reuse a logo.
  • Print delivery: a gradient that looks smooth on screen can show visible steps (banding) or shift color when converted for print. Supply a flat-color version of the logo alongside the gradient version for situations where gradients do not reproduce reliably.

Verify the result

  • Open the file directly in more than one browser and confirm that the gradient direction, colors and stops match your intent.
  • View the icon at the small sizes where it will actually appear, and check that the mark stays legible.
  • Open the file in a text editor and confirm that each url(#id) reference matches an existing gradient id.
  • Check that the file contains no embedded raster image unless one is intended.
  • If the logo has several parts, confirm whether the gradient restarts on each part or runs continuously, and that this is what you wanted.
  • Compare the gradient version with the flat fallback and the raster favicon files so all versions read as the same brand mark.

Limits of this guide: the gradient syntax described here follows the SVG specification and general practice. No measured thresholds, browser-support tables or tested legibility data were available, so confirm size and support decisions with your own tests and current browser documentation.