diff --git a/docs/03-plugins/convert-colors.mdx b/docs/03-plugins/convert-colors.mdx
index 073fff753..ceb07c590 100644
--- a/docs/03-plugins/convert-colors.mdx
+++ b/docs/03-plugins/convert-colors.mdx
@@ -8,22 +8,22 @@ svgo:
description: If to convert all instances of a color to currentColor. This means to inherit the active foreground color, for example in HTML5 this would be the color property in CSS.
default: false
names2hex:
- description: If to convert color names to the hex equivilent.
+ description: If to convert color names to the hex equivalent.
default: true
rgb2hex:
- description: If to convert RGB colors to the hex equivilent, does ignores RGBA.
+ description: If to convert RGB colors to the hex equivalent, does ignores RGBA.
default: true
shorthex:
- description: If to convert 6 character hex colors to the 3 character equivilents where possible.
+ description: If to convert 6 character hex colors to the 3 character equivalent where possible.
default: true
shortname:
- description: If to convert hex colors to the color name, if the color name is shorter then the hex equivilent.
+ description: If to convert hex colors to the color name, if the color name is shorter then the hex equivalent.
default: true
---
-Converts color references to the shortest equivilent.
+Converts color references to the shortest equivalent.
-Colors can be represented in various notations, the following table showcases some equivilent colors:
+Colors can be represented in various notations, the following table showcases some equivalent colors:
| Name | rgb() | #rrggbb | #rgb |
|---|---|---|---|
diff --git a/docs/03-plugins/remove-xlink.mdx b/docs/03-plugins/remove-xlink.mdx
new file mode 100644
index 000000000..c4896b903
--- /dev/null
+++ b/docs/03-plugins/remove-xlink.mdx
@@ -0,0 +1,35 @@
+---
+title: Remove XLink
+svgo:
+ pluginId: removeXlink
+---
+
+Removes XLink namespace prefixes and converts references to XLink attributes to the native SVG equivalent.
+
+Performs the following operations:
+
+* Converts `*:href` to [`href`](https://developer.mozilla.org/docs/Web/SVG/Attribute/href).
+* Converts `*:show` to [`target`](https://developer.mozilla.org/docs/Web/SVG/Attribute/target).
+* Converts `*.title` to [``](https://developer.mozilla.org/docs/Web/SVG/Element/title).
+* Drops all other references to the XLink namespace.
+* Removes XLink namespace declarations.
+
+It's recommended to use this plugin if you intend to inline SVGs into an HTML document. HTML does not support explicit namespaces, so namespace prefixes are ignored by the browser anyway.
+
+:::danger
+
+This replaces XLink with attributes that are only defined in the SVGO 2 spec, and so breaks compatibility with the SVG 1.1.
+
+:::
+
+## Usage
+
+<PluginUsage/>
+
+## Demo
+
+<PluginDemo/>
+
+## Implementation
+
+* https://github.com/svg/svgo/blob/main/plugins/removeXlink.js
diff --git a/docs/03-plugins/remove-xmlns.mdx b/docs/03-plugins/remove-xmlns.mdx
index c648bea6f..78bac7595 100644
--- a/docs/03-plugins/remove-xmlns.mdx
+++ b/docs/03-plugins/remove-xmlns.mdx
@@ -6,7 +6,7 @@ svgo:
Removes the `xmlns` attribute from the top-most `<svg>` element in the document.
-This optimization is encouraged if you plan to use your SVGs inline an HTML document. The HTML syntax does not support explicit namespaces, so these are ignored by the browser anyway.
+It's recommended to use this plugin if you intend to inline SVGs into an HTML document. HTML does not support explicit namespaces, so these are ignored by the browser anyway.
:::caution
diff --git a/lib/builtin.js b/lib/builtin.js
index c962f4358..28a380ec9 100644
--- a/lib/builtin.js
+++ b/lib/builtin.js
@@ -48,6 +48,7 @@ exports.builtin = [
require('../plugins/removeUselessDefs.js'),
require('../plugins/removeUselessStrokeAndFill.js'),
require('../plugins/removeViewBox.js'),
+ require('../plugins/removeXlink.js'),
require('../plugins/removeXMLNS.js'),
require('../plugins/removeXMLProcInst.js'),
require('../plugins/reusePaths.js'),
diff --git a/plugins/plugins-types.ts b/plugins/plugins-types.ts
index f872a8d58..e6d90b3a5 100644
--- a/plugins/plugins-types.ts
+++ b/plugins/plugins-types.ts
@@ -241,6 +241,7 @@ export type BuiltinsWithOptionalParams = DefaultPlugins & {
removeRasterImages: void;
removeScriptElement: void;
removeStyleElement: void;
+ removeXlink: void;
removeXMLNS: void;
reusePaths: void;
};
diff --git a/plugins/removeEditorsNSData.js b/plugins/removeEditorsNSData.js
index cf8016cde..e85bef898 100644
--- a/plugins/removeEditorsNSData.js
+++ b/plugins/removeEditorsNSData.js
@@ -30,7 +30,7 @@ exports.fn = (_root, params) => {
return {
element: {
enter: (node, parentNode) => {
- // collect namespace aliases from svg element
+ // collect namespace prefixes from svg element
if (node.name === 'svg') {
for (const [name, value] of Object.entries(node.attributes)) {
if (name.startsWith('xmlns:') && namespaces.includes(value)) {
diff --git a/plugins/removeXMLNS.js b/plugins/removeXMLNS.js
index 6312629df..b7ec69a12 100644
--- a/plugins/removeXMLNS.js
+++ b/plugins/removeXMLNS.js
@@ -22,7 +22,6 @@ exports.fn = () => {
enter: (node) => {
if (node.name === 'svg') {
delete node.attributes.xmlns;
- delete node.attributes['xmlns:xlink'];
}
},
},
diff --git a/plugins/removeXlink.js b/plugins/removeXlink.js
new file mode 100644
index 000000000..a060c7c1b
--- /dev/null
+++ b/plugins/removeXlink.js
@@ -0,0 +1,174 @@
+'use strict';
+
+/**
+ * @typedef {import('../lib/types').XastElement} XastElement
+ */
+
+exports.name = 'removeXlink';
+exports.description =
+ 'remove xlink namespace and replaces attributes with the SVG 2 equivalent where applicable';
+
+/** URI indicating the Xlink namespace. */
+const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
+
+/**
+ * Map of `xlink:show` values to the SVG 2 `target` attribute values.
+ *
+ * @type {Record<string, string>}
+ * @see https://developer.mozilla.org/docs/Web/SVG/Attribute/xlink:show#usage_notes
+ */
+const SHOW_TO_TARGET = {
+ new: '_blank',
+ replace: '_self',
+};
+
+/**
+ * Removes XLink namespace prefixes and converts references to XLink attributes
+ * to the native SVG equivalent.
+ *
+ * The XLink namespace is deprecated in SVG 2.
+ *
+ * @type {import('../lib/types').Plugin<void>}
+ * @see https://developer.mozilla.org/docs/Web/SVG/Attribute/xlink:href
+ */
+exports.fn = () => {
+ /**
+ * XLink namespace prefixes that are currently in the stack.
+ *
+ * @type {string[]}
+ */
+ const xlinkPrefixes = [];
+
+ /**
+ * Namespace prefixes that exist in {@link xlinkPrefixes} but were overriden
+ * in a child element to point to another namespace, and so is not treated as
+ * an XLink attribute.
+ *
+ * @type {string[]}
+ */
+ const overriddenPrefixes = [];
+
+ return {
+ element: {
+ enter: (node) => {
+ for (const [key, value] of Object.entries(node.attributes)) {
+ if (key.startsWith('xmlns:')) {
+ const prefix = key.split(':', 2)[1];
+
+ if (value === XLINK_NAMESPACE) {
+ xlinkPrefixes.push(prefix);
+ continue;
+ }
+
+ if (xlinkPrefixes.includes(prefix)) {
+ overriddenPrefixes.push(prefix);
+ }
+ }
+ }
+
+ if (
+ overriddenPrefixes.some((prefix) => xlinkPrefixes.includes(prefix))
+ ) {
+ return;
+ }
+
+ const hrefAttrs = xlinkPrefixes
+ .map((prefix) => `${prefix}:href`)
+ .filter((attr) => node.attributes[attr] != null);
+ for (let i = hrefAttrs.length - 1; i >= 0; i--) {
+ const attr = hrefAttrs[i];
+ const value = node.attributes[attr];
+
+ if (node.attributes.href != null) {
+ delete node.attributes[attr];
+ continue;
+ }
+
+ node.attributes.href = value;
+ delete node.attributes[attr];
+ }
+
+ const showAttrs = xlinkPrefixes
+ .map((prefix) => `${prefix}:show`)
+ .filter((attr) => node.attributes[attr] != null);
+ for (let i = showAttrs.length - 1; i >= 0; i--) {
+ const attr = showAttrs[i];
+ const value = node.attributes[attr];
+ const mapping = SHOW_TO_TARGET[value];
+
+ if (node.attributes.target != null || mapping == null) {
+ delete node.attributes[attr];
+ continue;
+ }
+
+ node.attributes.target = mapping;
+ delete node.attributes[attr];
+ }
+
+ const titleAttrs = xlinkPrefixes
+ .map((prefix) => `${prefix}:title`)
+ .filter((attr) => node.attributes[attr] != null);
+ for (let i = titleAttrs.length - 1; i >= 0; i--) {
+ const attr = titleAttrs[i];
+ const value = node.attributes[attr];
+ const hasTitle = node.children.filter(
+ (child) => child.type === 'element' && child.name === 'title'
+ );
+
+ if (hasTitle.length > 0) {
+ delete node.attributes[attr];
+ continue;
+ }
+
+ /** @type {XastElement} */
+ const titleTag = {
+ type: 'element',
+ name: 'title',
+ attributes: {},
+ children: [
+ {
+ type: 'text',
+ value,
+ },
+ ],
+ };
+
+ Object.defineProperty(titleTag, 'parentNode', {
+ writable: true,
+ value: node,
+ });
+
+ node.children.unshift(titleTag);
+ delete node.attributes[attr];
+ }
+ },
+ exit: (node) => {
+ for (const [key, value] of Object.entries(node.attributes)) {
+ const [prefix, attr] = key.split(':', 2);
+
+ if (
+ xlinkPrefixes.includes(prefix) &&
+ !overriddenPrefixes.includes(prefix)
+ ) {
+ delete node.attributes[key];
+ continue;
+ }
+
+ if (key.startsWith('xmlns:')) {
+ if (value === XLINK_NAMESPACE) {
+ const index = xlinkPrefixes.indexOf(attr);
+ xlinkPrefixes.splice(index, 1);
+ delete node.attributes[key];
+ continue;
+ }
+
+ if (overriddenPrefixes.includes(prefix)) {
+ const index = overriddenPrefixes.indexOf(attr);
+ overriddenPrefixes.splice(index, 1);
+ }
+ }
+ }
+ },
+ },
+ };
+};
diff --git a/test/plugins/removeXlink.01.svg b/test/plugins/removeXlink.01.svg
new file mode 100644
index 000000000..94fa7b499
--- /dev/null
+++ b/test/plugins/removeXlink.01.svg
@@ -0,0 +1,25 @@
+Remove xmlns:xlink and replace xlink:href with href attribute
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 348.61 100">
+ <defs>
+ <linearGradient id="a" x1="263.36" y1="14.74" x2="333.47" y2="84.85" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stop-color="#45afe4"/>
+ <stop offset="1" stop-color="#364f9e"/>
+ </linearGradient>
+ <linearGradient id="b" x1="262.64" y1="15.46" x2="332.75" y2="85.57" xlink:href="#a"/>
+ </defs>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.61 100">
+ <defs>
+ <linearGradient id="a" x1="263.36" y1="14.74" x2="333.47" y2="84.85" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stop-color="#45afe4"/>
+ <stop offset="1" stop-color="#364f9e"/>
+ </linearGradient>
+ <linearGradient id="b" x1="262.64" y1="15.46" x2="332.75" y2="85.57" href="#a"/>
+ </defs>
+</svg>
diff --git a/test/plugins/removeXlink.02.svg b/test/plugins/removeXlink.02.svg
new file mode 100644
index 000000000..07649980e
--- /dev/null
+++ b/test/plugins/removeXlink.02.svg
@@ -0,0 +1,25 @@
+Remove xlink namespace even if it's under another prefix.
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:uwu="http://www.w3.org/1999/xlink" viewBox="0 0 348.61 100">
+ <defs>
+ <linearGradient id="a" x1="263.36" y1="14.74" x2="333.47" y2="84.85" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stop-color="#45afe4"/>
+ <stop offset="1" stop-color="#364f9e"/>
+ </linearGradient>
+ <linearGradient id="b" x1="262.64" y1="15.46" x2="332.75" y2="85.57" uwu:href="#a"/>
+ </defs>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.61 100">
+ <defs>
+ <linearGradient id="a" x1="263.36" y1="14.74" x2="333.47" y2="84.85" gradientUnits="userSpaceOnUse">
+ <stop offset="0" stop-color="#45afe4"/>
+ <stop offset="1" stop-color="#364f9e"/>
+ </linearGradient>
+ <linearGradient id="b" x1="262.64" y1="15.46" x2="332.75" y2="85.57" href="#a"/>
+ </defs>
+</svg>
diff --git a/test/plugins/removeXlink.03.svg b/test/plugins/removeXlink.03.svg
new file mode 100644
index 000000000..519cd77aa
--- /dev/null
+++ b/test/plugins/removeXlink.03.svg
@@ -0,0 +1,19 @@
+Convert xlink:href and xlink:show to href and target, and convert xlink:title
+to title node.
+
+===
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50">
+ <a xlink:href="https://duckduckgo.com" xlink:show="new" xlink:title="DuckDuckGo Homepage">
+ <text x="0" y="10">uwu</text>
+ </a>
+</svg>
+
+@@@
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
+ <a href="https://duckduckgo.com" target="_blank">
+ <title>DuckDuckGo Homepage
+ uwu
+
+
diff --git a/test/plugins/removeXlink.04.svg b/test/plugins/removeXlink.04.svg
new file mode 100644
index 000000000..7bb838527
--- /dev/null
+++ b/test/plugins/removeXlink.04.svg
@@ -0,0 +1,25 @@
+Drops other xlink attributes.
+
+===
+
+
+
+@@@
+
+