SVGAElement: protocol property

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The protocol property of the SVGAElement interface represents the protocol or scheme of the SVG <a> element's href, including the final ":".

This property can be set to change the protocol of the URL. A ":" is appended to the provided string if not provided. The provided scheme has to be compatible with the rest of the URL to be considered valid. Setting it also rewrites the element's href attribute as a complete, absolute URL.

See URL.protocol for more information.

Value

A string.

Examples

Getting the protocol of an SVG link

Given the following SVG:

html

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg">
  <a id="link" href="https://example.com/">
    <text x="0" y="20">Example</text>
  </a>
</svg>

<pre id="log"></pre>

svg {
  width: 200px;
  height: 30px;
}
svg a text {
  fill: blue;
  text-decoration: underline;
}
#log {
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
}

We can read the protocol of the link, including the final ":":

const link = document.getElementById("link");

log(`protocol: "${link.protocol}"`); // protocol: "https:"

Specifications

Specification
Scalable Vector Graphics (SVG) 2 # InterfaceSVGAElement

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Sep 11, 2026 by MDN contributors.

View this page on GitHub • Report a problem with this content