@href : The Hyperlink Reference Attribute

The href attribute (or xlink:href in older SVG) specifies a reference to another resource or element. It’s used to link to external resources (images, documents), reference reusable elements (gradients, patterns, markers), and create hyperlinks.

Usage

The href attribute is used to:

Reference reusable gradient and pattern definitions
Link to external images and resources
Reference markers for paths and lines
Create clickable hyperlinks in SVG
Support data-driven resource references
Build component libraries with shared definitions

<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300">
    <defs>
        <linearGradient id="myGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#3498db"/>
            <stop offset="100%" stop-color="#e74c3c"/>
        </linearGradient>
    </defs>

    <!-- Use href to reference gradient -->
    <rect x="50" y="50" width="300" height="200" fill="url(#myGradient)"/>

    <!-- Link to image -->
    <image href="image.png" x="100" y="100" width="200" height="100"/>

    <!-- Clickable link -->
    <a href="https://example.com">
        <text x="200" y="280" text-anchor="middle" fill="#3498db">Click Me</text>
    </a>
</svg>

Supported Values

Value Format	Description	Example
`#id`	Reference to element in same document	`href="#myGradient"` or `fill="url(#myGradient)"`
`url(#id)`	URL reference to element (for fill/stroke)	`fill="url(#pattern1)"`
`file.ext`	Relative file path	`href="image.png"`
`/path/file.ext`	Absolute file path	`href="/images/logo.svg"`
`http://...`	Full URL	`href="https://example.com"`
`data:...`	Data URI	`href="data:image/svg+xml,..."`

Reference Syntax

<!-- Gradient/pattern reference in fill/stroke -->
<rect fill="url(#gradientID)"/>
<circle stroke="url(#patternID)"/>

<!-- Direct element reference -->
<use href="#symbolID"/>
<image href="photo.jpg"/>

<!-- Hyperlink -->
<a href="https://example.com">
    <rect width="100" height="50"/>
</a>

Supported Elements

The href attribute is supported on:

<use> - Reference to reusable element
<image> - External image reference
<a> - Hyperlink reference
<linearGradient> - Reference to another gradient (inheritance)
<radialGradient> - Reference to another gradient (inheritance)
<pattern> - Reference to another pattern (inheritance)
fill and stroke attributes - Reference to paint servers via url(#id)

Data Binding

Dynamic Gradient References

Reference different gradients based on data:

<!-- Model: { gradientType: 'blue', status: 'active' } -->
<svg width="400" height="300">
    <defs>
        <linearGradient id="blue-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#3498db"/>
            <stop offset="100%" stop-color="#2980b9"/>
        </linearGradient>
        <linearGradient id="red-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#e74c3c"/>
            <stop offset="100%" stop-color="#c0392b"/>
        </linearGradient>
        <linearGradient id="green-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#2ecc71"/>
            <stop offset="100%" stop-color="#27ae60"/>
        </linearGradient>
    </defs>

    <rect x="50" y="50" width="300" height="200"
          fill="url(#-gradient)"
          stroke="#2c3e50" stroke-width="2"/>
    <text x="200" y="270" text-anchor="middle">
        Status:  ()
    </text>
</svg>

Dynamic Image Sources

Load images from data properties:

<!-- Model: { images: [{src: 'photo1.jpg', x: 50, y: 50}, {src: 'photo2.jpg', x: 250, y: 50}] } -->
<svg width="500" height="300">
    <template data-bind="">
        <image href="" x="" y=""
               width="180" height="150"
               preserveAspectRatio="xMidYMid slice"/>
        <rect x="" y="" width="180" height="150"
              fill="none" stroke="#2c3e50" stroke-width="2"/>
    </template>
</svg>

Reusable Components with Use

Reference symbols dynamically:

<!-- Model: { icons: [{type: 'check', x: 50, y: 50}, {type: 'cross', x: 150, y: 50}, {type: 'star', x: 250, y: 50}] } -->
<svg width="400" height="200">
    <defs>
        <symbol id="check" viewBox="0 0 24 24">
            <path d="M 5,12 L 10,17 L 20,7" fill="none" stroke="#2ecc71" stroke-width="3"/>
        </symbol>
        <symbol id="cross" viewBox="0 0 24 24">
            <path d="M 7,7 L 17,17 M 17,7 L 7,17" fill="none" stroke="#e74c3c" stroke-width="3"/>
        </symbol>
        <symbol id="star" viewBox="0 0 24 24">
            <path d="M 12,2 L 14,9 L 22,9 L 16,14 L 18,22 L 12,17 L 6,22 L 8,14 L 2,9 L 10,9 Z"
                  fill="#f39c12"/>
        </symbol>
    </defs>

    <template data-bind="">
        <use href="#" x="" y="" width="80" height="80"/>
    </template>
</svg>

Dynamic Hyperlinks

Create clickable elements with data-driven URLs:

<!-- Model: { buttons: [{label: 'Home', url: '/home', color: '#3498db'}, {label: 'About', url: '/about', color: '#2ecc71'}] } -->
<svg width="400" height="200">
    <template data-bind="">
        <a href="">
            <rect x="" y="50" width="120" height="50"
                  rx="5" fill="" style="cursor:pointer"/>
            <text x="" y="82"
                  text-anchor="middle" fill="white"
                  font-size="16" font-weight="bold"></text>
        </a>
    </template>
</svg>

Pattern Library References

Reference patterns from a library:

<!-- Model: { surfaces: [{pattern: 'dots', x: 50, y: 50}, {pattern: 'stripes', x: 250, y: 50}] } -->
<svg width="500" height="300">
    <defs>
        <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="5" fill="#3498db"/>
        </pattern>
        <pattern id="stripes" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="10" height="20" fill="#e74c3c"/>
            <rect x="10" y="0" width="10" height="20" fill="#c0392b"/>
        </pattern>
    </defs>

    <template data-bind="">
        <rect x="" y="" width="180" height="150"
              fill="url(#)" stroke="#2c3e50" stroke-width="2"/>
    </template>
</svg>

Notes

URL Reference Format

For fill and stroke:

<!-- Use url(#id) format -->
<rect fill="url(#myGradient)"/>
<circle stroke="url(#myPattern)"/>

For element references:

<!-- Direct href -->
<use href="#mySymbol"/>
<image href="photo.jpg"/>

ID References (#id)

Reference elements defined in <defs> section
ID must be unique within document
Use with gradients, patterns, markers, symbols
Fragment identifier syntax: #elementID

<defs>
    <linearGradient id="grad1">...</linearGradient>
</defs>
<rect fill="url(#grad1)"/>

External Resources

Image files:

<image href="image.png"/>        <!-- Relative path -->
<image href="/assets/logo.svg"/> <!-- Absolute path -->
<image href="https://example.com/photo.jpg"/> <!-- Full URL -->

Supported formats:

PNG, JPEG, GIF (raster images)
SVG (vector images)
Data URIs (embedded data)

Gradient and Pattern Inheritance

Gradients and patterns can reference others for inheritance:

<defs>
    <!-- Base gradient -->
    <linearGradient id="base-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#3498db"/>
        <stop offset="100%" stop-color="#2980b9"/>
    </linearGradient>

    <!-- Inherits colors, changes direction -->
    <linearGradient id="vertical-gradient" href="#base-gradient"
                    x1="0%" y1="0%" x2="0%" y2="100%"/>
</defs>

xlink:href vs href

Modern SVG (SVG 2):

<use href="#myElement"/>
<image href="photo.jpg"/>

Legacy SVG (SVG 1.1):

<use xlink:href="#myElement"/>
<image xlink:href="photo.jpg"/>

Browser compatibility:

Modern browsers support both
Use href for new documents
Use xlink:href for legacy support
Some tools/libraries may require xlink namespace

Hyperlinks with <a>

Create clickable regions:

<a href="https://example.com">
    <rect width="100" height="50" fill="blue"/>
    <text x="50" y="30" text-anchor="middle" fill="white">Click</text>
</a>

Link targets:

<a href="https://example.com" target="_blank">  <!-- New window -->
<a href="https://example.com" target="_self">   <!-- Same window -->
<a href="https://example.com" target="_parent"> <!-- Parent frame -->

Use Element References

The <use> element clones referenced content:

<defs>
    <g id="shape">
        <circle cx="20" cy="20" r="15" fill="blue"/>
        <text x="20" y="25" text-anchor="middle" fill="white">A</text>
    </g>
</defs>

<!-- Reuse multiple times -->
<use href="#shape" x="0" y="0"/>
<use href="#shape" x="50" y="0"/>
<use href="#shape" x="100" y="0"/>

Security Considerations

External resources:

Be cautious with user-provided URLs
Validate image sources
Consider CORS restrictions
Use HTTPS for secure resources

XSS prevention:

Sanitize href values from user input
Avoid javascript: URLs
Validate URL protocols

Performance Considerations

Reusable elements:

Define once in <defs>, reference multiple times
Reduces file size
Improves rendering performance
Better for maintenance

External images:

Consider image loading time
Use appropriate image formats
Optimize image sizes
Consider lazy loading for many images

Common Use Cases

Gradient fills:

<rect fill="url(#myGradient)"/>

Pattern fills:

<circle fill="url(#myPattern)"/>

Reusable graphics:

<use href="#icon-star"/>

External images:

<image href="photo.jpg"/>

Clickable links:

<a href="https://example.com">
    <text>Click here</text>
</a>

Marker references:

<line marker-end="url(#arrow)"/>

Examples

Gradient Reference

<svg width="400" height="200">
    <defs>
        <linearGradient id="blueGrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#3498db"/>
            <stop offset="100%" stop-color="#2980b9"/>
        </linearGradient>
    </defs>

    <rect x="50" y="50" width="300" height="100"
          fill="url(#blueGrad)" stroke="#2c3e50" stroke-width="2"/>
</svg>

Multiple Pattern References

<svg width="500" height="300">
    <defs>
        <pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="5" fill="#3498db"/>
        </pattern>
        <pattern id="stripes" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="10" height="20" fill="#e74c3c"/>
            <rect x="10" y="0" width="10" height="20" fill="#c0392b"/>
        </pattern>
    </defs>

    <rect x="50" y="50" width="180" height="200" fill="url(#dots)" stroke="#2c3e50"/>
    <rect x="270" y="50" width="180" height="200" fill="url(#stripes)" stroke="#2c3e50"/>
</svg>

Using Symbols with Use

<svg width="400" height="200">
    <defs>
        <symbol id="star" viewBox="0 0 24 24">
            <path d="M 12,2 L 14,9 L 22,9 L 16,14 L 18,22 L 12,17 L 6,22 L 8,14 L 2,9 L 10,9 Z"
                  fill="#f39c12"/>
        </symbol>
    </defs>

    <use href="#star" x="50" y="50" width="60" height="60"/>
    <use href="#star" x="150" y="50" width="60" height="60"/>
    <use href="#star" x="250" y="50" width="60" height="60"/>
    <use href="#star" x="350" y="50" width="60" height="60"/>
</svg>

External Image Reference

<svg width="400" height="300">
    <image href="photo.jpg" x="50" y="50" width="300" height="200"
           preserveAspectRatio="xMidYMid slice"/>
    <rect x="50" y="50" width="300" height="200"
          fill="none" stroke="#2c3e50" stroke-width="3"/>
</svg>

Clickable Button Link

<svg width="300" height="150">
    <a href="https://example.com" target="_blank">
        <rect x="50" y="50" width="200" height="50" rx="10"
              fill="#3498db" style="cursor:pointer"/>
        <text x="150" y="82" text-anchor="middle"
              fill="white" font-size="18" font-weight="bold"
              style="pointer-events:none">Visit Website</text>
    </a>
</svg>

Icon Library with Reuse

<svg width="500" height="200">
    <defs>
        <symbol id="home" viewBox="0 0 24 24">
            <path d="M 12,3 L 20,10 L 20,20 L 4,20 L 4,10 Z M 9,20 L 9,14 L 15,14 L 15,20"
                  fill="#3498db" stroke="#2c3e50" stroke-width="1"/>
        </symbol>
        <symbol id="mail" viewBox="0 0 24 24">
            <rect x="2" y="5" width="20" height="14" rx="2"
                  fill="none" stroke="#3498db" stroke-width="2"/>
            <path d="M 2,7 L 12,13 L 22,7" fill="none" stroke="#3498db" stroke-width="2"/>
        </symbol>
        <symbol id="settings" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="3" fill="#3498db"/>
            <path d="M 12,1 L 12,5 M 12,19 L 12,23 M 1,12 L 5,12 M 19,12 L 23,12
                     M 4.93,4.93 L 7.76,7.76 M 16.24,16.24 L 19.07,19.07
                     M 4.93,19.07 L 7.76,16.24 M 16.24,7.76 L 19.07,4.93"
                  stroke="#3498db" stroke-width="2"/>
        </symbol>
    </defs>

    <use href="#home" x="50" y="50" width="80" height="80"/>
    <use href="#mail" x="180" y="50" width="80" height="80"/>
    <use href="#settings" x="310" y="50" width="80" height="80"/>
</svg>

Gradient Inheritance

<svg width="500" height="300">
    <defs>
        <!-- Base gradient with color stops -->
        <linearGradient id="baseGrad">
            <stop offset="0%" stop-color="#3498db"/>
            <stop offset="100%" stop-color="#e74c3c"/>
        </linearGradient>

        <!-- Horizontal gradient (inherits colors) -->
        <linearGradient id="horizGrad" href="#baseGrad"
                        x1="0%" y1="0%" x2="100%" y2="0%"/>

        <!-- Vertical gradient (inherits colors) -->
        <linearGradient id="vertGrad" href="#baseGrad"
                        x1="0%" y1="0%" x2="0%" y2="100%"/>

        <!-- Diagonal gradient (inherits colors) -->
        <linearGradient id="diagGrad" href="#baseGrad"
                        x1="0%" y1="0%" x2="100%" y2="100%"/>
    </defs>

    <rect x="50" y="50" width="120" height="200" fill="url(#horizGrad)" stroke="#2c3e50"/>
    <rect x="190" y="50" width="120" height="200" fill="url(#vertGrad)" stroke="#2c3e50"/>
    <rect x="330" y="50" width="120" height="200" fill="url(#diagGrad)" stroke="#2c3e50"/>
</svg>

Marker References on Paths

<svg width="400" height="300">
    <defs>
        <marker id="arrow" markerWidth="10" markerHeight="10"
                refX="10" refY="5" orient="auto">
            <polygon points="0,0 10,5 0,10" fill="#3498db"/>
        </marker>
        <marker id="dot" markerWidth="8" markerHeight="8"
                refX="4" refY="4">
            <circle cx="4" cy="4" r="3" fill="#e74c3c"/>
        </marker>
    </defs>

    <path d="M 50,50 L 200,50 L 200,150 L 350,150"
          fill="none" stroke="#2c3e50" stroke-width="3"
          marker-start="url(#dot)" marker-end="url(#arrow)"/>

    <path d="M 50,200 Q 200,100 350,200"
          fill="none" stroke="#2c3e50" stroke-width="3"
          marker-start="url(#dot)" marker-end="url(#arrow)"/>
</svg>

Multiple Image Gallery

<svg width="600" height="400">
    <image href="image1.jpg" x="20" y="20" width="180" height="150"
           preserveAspectRatio="xMidYMid slice"/>
    <rect x="20" y="20" width="180" height="150" fill="none" stroke="#2c3e50" stroke-width="2"/>

    <image href="image2.jpg" x="210" y="20" width="180" height="150"
           preserveAspectRatio="xMidYMid slice"/>
    <rect x="210" y="20" width="180" height="150" fill="none" stroke="#2c3e50" stroke-width="2"/>

    <image href="image3.jpg" x="400" y="20" width="180" height="150"
           preserveAspectRatio="xMidYMid slice"/>
    <rect x="400" y="20" width="180" height="150" fill="none" stroke="#2c3e50" stroke-width="2"/>

    <image href="image4.jpg" x="20" y="230" width="180" height="150"
           preserveAspectRatio="xMidYMid slice"/>
    <rect x="20" y="230" width="180" height="150" fill="none" stroke="#2c3e50" stroke-width="2"/>

    <image href="image5.jpg" x="210" y="230" width="180" height="150"
           preserveAspectRatio="xMidYMid slice"/>
    <rect x="210" y="230" width="180" height="150" fill="none" stroke="#2c3e50" stroke-width="2"/>

    <image href="image6.jpg" x="400" y="230" width="180" height="150"
           preserveAspectRatio="xMidYMid slice"/>
    <rect x="400" y="230" width="180" height="150" fill="none" stroke="#2c3e50" stroke-width="2"/>
</svg>

<svg width="600" height="80">
    <defs>
        <linearGradient id="btnGrad" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#3498db"/>
            <stop offset="100%" stop-color="#2980b9"/>
        </linearGradient>
    </defs>

    <a href="/home">
        <rect x="20" y="20" width="100" height="40" rx="5"
              fill="url(#btnGrad)" style="cursor:pointer"/>
        <text x="70" y="45" text-anchor="middle" fill="white"
              font-weight="bold" style="pointer-events:none">Home</text>
    </a>

    <a href="/products">
        <rect x="140" y="20" width="100" height="40" rx="5"
              fill="url(#btnGrad)" style="cursor:pointer"/>
        <text x="190" y="45" text-anchor="middle" fill="white"
              font-weight="bold" style="pointer-events:none">Products</text>
    </a>

    <a href="/about">
        <rect x="260" y="20" width="100" height="40" rx="5"
              fill="url(#btnGrad)" style="cursor:pointer"/>
        <text x="310" y="45" text-anchor="middle" fill="white"
              font-weight="bold" style="pointer-events:none">About</text>
    </a>

    <a href="/contact">
        <rect x="380" y="20" width="100" height="40" rx="5"
              fill="url(#btnGrad)" style="cursor:pointer"/>
        <text x="430" y="45" text-anchor="middle" fill="white"
              font-weight="bold" style="pointer-events:none">Contact</text>
    </a>
</svg>

Reusable Component System

<svg width="600" height="400">
    <defs>
        <!-- Badge component -->
        <g id="badge">
            <rect width="80" height="30" rx="15" fill="#2ecc71"/>
            <text x="40" y="20" text-anchor="middle" fill="white"
                  font-size="12" font-weight="bold">NEW</text>
        </g>

        <!-- Warning icon -->
        <g id="warning">
            <path d="M 12,2 L 22,20 L 2,20 Z" fill="#f39c12"/>
            <path d="M 12,8 L 12,14 M 12,16 L 12,18" stroke="white" stroke-width="2"/>
        </g>

        <!-- Success checkmark -->
        <g id="success">
            <circle cx="12" cy="12" r="10" fill="#2ecc71"/>
            <path d="M 7,12 L 11,16 L 17,8" fill="none" stroke="white" stroke-width="2"/>
        </g>
    </defs>

    <g transform="translate(50, 50)">
        <rect width="150" height="100" fill="#ecf0f1" stroke="#bdc3c7" stroke-width="2"/>
        <use href="#badge" x="70" y="5"/>
        <text x="75" y="60" text-anchor="middle">Product A</text>
    </g>

    <g transform="translate(230, 50)">
        <rect width="150" height="100" fill="#ecf0f1" stroke="#bdc3c7" stroke-width="2"/>
        <use href="#warning" x="119" y="10" width="24" height="24"/>
        <text x="75" y="60" text-anchor="middle">Product B</text>
    </g>

    <g transform="translate(410, 50)">
        <rect width="150" height="100" fill="#ecf0f1" stroke="#bdc3c7" stroke-width="2"/>
        <use href="#success" x="119" y="10" width="24" height="24"/>
        <text x="75" y="60" text-anchor="middle">Product C</text>
    </g>
</svg>

Radial Gradient Reference

<svg width="400" height="300">
    <defs>
        <radialGradient id="radGrad" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stop-color="#ffffff"/>
            <stop offset="100%" stop-color="#3498db"/>
        </radialGradient>
    </defs>

    <circle cx="200" cy="150" r="120" fill="url(#radGrad)" stroke="#2c3e50" stroke-width="2"/>
</svg>

Data URI Image Embedding

<svg width="400" height="300">
    <image href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Crect width='100' height='100' fill='%233498db'/%3E%3Ccircle cx='50' cy='50' r='30' fill='white'/%3E%3C/svg%3E"
           x="150" y="100" width="100" height="100"/>
</svg>

Pattern Reference in Stroke

<svg width="400" height="300">
    <defs>
        <pattern id="dashPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="5" height="10" fill="#3498db"/>
        </pattern>
    </defs>

    <rect x="50" y="50" width="300" height="200"
          fill="none" stroke="url(#dashPattern)" stroke-width="10"/>
</svg>

Animated Element Reference

<svg width="400" height="200">
    <defs>
        <g id="animatedShape">
            <circle cx="20" cy="20" r="15" fill="#e74c3c">
                <animate attributeName="r" from="15" to="20" dur="1s"
                         repeatCount="indefinite" direction="alternate"/>
            </circle>
        </g>
    </defs>

    <use href="#animatedShape" x="50" y="50"/>
    <use href="#animatedShape" x="150" y="50"/>
    <use href="#animatedShape" x="250" y="50"/>
</svg>

Complex Reusable Graphics

<svg width="500" height="300">
    <defs>
        <g id="card">
            <rect width="120" height="160" rx="8" fill="white" stroke="#bdc3c7" stroke-width="2"/>
            <rect x="10" y="10" width="100" height="80" rx="4" fill="#ecf0f1"/>
            <rect x="10" y="100" width="100" height="8" rx="4" fill="#95a5a6"/>
            <rect x="10" y="118" width="60" height="8" rx="4" fill="#bdc3c7"/>
            <rect x="10" y="136" width="80" height="8" rx="4" fill="#bdc3c7"/>
        </g>
    </defs>

    <use href="#card" x="30" y="50"/>
    <use href="#card" x="180" y="50"/>
    <use href="#card" x="330" y="50"/>
</svg>