diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 4cc6424..1e694e3 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1713,6 +1713,62 @@ function _field_multiple_value_form_sort_helper($a, $b) {
 }
 
 /**
+ * Prepares variables for SVG templates.
+ *
+ * Default template: svg.html.twig
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - children: Children to render.
+ */
+function template_preprocess_svg(array &$variables) {
+  $element = $variables['element'];
+  $variables['children'] = $element['#children'];
+}
+
+/**
+ * Prepares variables for SVG g templates.
+ *
+ * Default template: svg-g.html.twig
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - children: Children to render.
+ */
+function template_preprocess_svg_g(array &$variables) {
+  $element = $variables['element'];
+  $variables['children'] = $element['#children'];
+}
+
+/**
+ * Prepares variables for SVG rect templates.
+ *
+ * Default template: svg-rect.html.twig
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - children: Children to render.
+ */
+function template_preprocess_svg_rect(array &$variables) {
+  $element = $variables['element'];
+  $variables['children'] = $element['#children'];
+}
+
+/**
+ * Prepares variables for SVG use templates.
+ *
+ * Default template: svg-use.html.twig
+ *
+ * @param array $variables
+ *   An associative array containing:
+ *   - children: Children to render.
+ */
+function template_preprocess_svg_use(array &$variables) {
+  $element = $variables['element'];
+  $variables['children'] = $element['#children'];
+}
+
+/**
  * Provides theme registration for themes across .inc files.
  */
 function drupal_common_theme() {
@@ -1864,5 +1920,17 @@ function drupal_common_theme() {
     'field_multiple_value_form' => [
       'render element' => 'element',
     ],
+    'svg' => [
+      'render element' => 'element',
+    ],
+    'svg_g' => [
+      'render element' => 'element',
+    ],
+    'svg_rect' => [
+      'render element' => 'element',
+    ],
+    'svg_use' => [
+      'render element' => 'element',
+    ],
   ];
 }
diff --git a/core/lib/Drupal/Core/Render/Element/Svg.php b/core/lib/Drupal/Core/Render/Element/Svg.php
new file mode 100644
index 0000000..1551a53
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Element/Svg.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Drupal\Core\Render\Element;
+
+/**
+ * Provides an SVG element.
+ *
+ * Usage example:
+ * @code
+ * $form['icon'] = [
+ *   '#type' => 'svg',
+ *   '#attributes' => [
+ *     'width' => 32,
+ *     'height' => 32,
+ *   ],
+ * ];
+ * $form['icon']['rect'] = [
+ *   '#type' => 'svg_rect',
+ *   '#attributes' => [
+ *     'x' => 8,
+ *     'y' => 8,
+ *     'width' => 16,
+ *     'height' => 16,
+ *   ],
+ * ];
+ * @endcode
+ *
+ * @RenderElement("svg")
+ */
+class Svg extends RenderElement {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getInfo() {
+    return [
+      '#theme_wrappers' => ['svg'],
+    ];
+  }
+
+}
diff --git a/core/lib/Drupal/Core/Render/Element/SvgG.php b/core/lib/Drupal/Core/Render/Element/SvgG.php
new file mode 100644
index 0000000..85fe352
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Element/SvgG.php
@@ -0,0 +1,53 @@
+<?php
+
+namespace Drupal\Core\Render\Element;
+
+/**
+ * Provides an SVG g element.
+ *
+ * Usage example:
+ * @code
+ * $form['icon'] = [
+ *   '#type' => 'svg',
+ *   '#attributes' => [
+ *     'width' => 32,
+ *     'height' => 32,
+ *   ],
+ * ];
+ * $form['icon']['g'] = [
+ *   '#type' => 'svg_g',
+ * ];
+ * $form['icon']['g']['top_left'] = [
+ *   '#type' => 'svg_rect',
+ *   '#attributes' => [
+ *     'x' => 0,
+ *     'y' => 0,
+ *     'width' => 16,
+ *     'height' => 16,
+ *   ],
+ * ];
+ * $form['icon']['g']['bottom_right'] = [
+ *   '#type' => 'svg_rect',
+ *   '#attributes' => [
+ *     'x' => 16,
+ *     'y' => 16,
+ *     'width' => 16,
+ *     'height' => 16,
+ *   ],
+ * ];
+ * @endcode
+ *
+ * @RenderElement("svg_g")
+ */
+class SvgG extends RenderElement {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getInfo() {
+    return [
+      '#theme_wrappers' => ['svg_g'],
+    ];
+  }
+
+}
diff --git a/core/lib/Drupal/Core/Render/Element/SvgRect.php b/core/lib/Drupal/Core/Render/Element/SvgRect.php
new file mode 100644
index 0000000..4d07297
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Element/SvgRect.php
@@ -0,0 +1,41 @@
+<?php
+
+namespace Drupal\Core\Render\Element;
+
+/**
+ * Provides an SVG rect element.
+ *
+ * Usage example:
+ * @code
+ * $form['icon'] = [
+ *   '#type' => 'svg',
+ *   '#attributes' => [
+ *     'width' => 32,
+ *     'height' => 32,
+ *   ],
+ * ];
+ * $form['icon']['bar'] = [
+ *   '#type' => 'svg_rect',
+ *   '#attributes' => [
+ *     'x' => 0,
+ *     'y' => 8,
+ *     'width' => 32,
+ *     'height' => 16,
+ *   ],
+ * ];
+ * @endcode
+ *
+ * @RenderElement("svg_rect")
+ */
+class SvgRect extends RenderElement {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getInfo() {
+    return [
+      '#theme_wrappers' => ['svg_rect'],
+    ];
+  }
+
+}
diff --git a/core/lib/Drupal/Core/Render/Element/SvgUse.php b/core/lib/Drupal/Core/Render/Element/SvgUse.php
new file mode 100644
index 0000000..2ce77e3
--- /dev/null
+++ b/core/lib/Drupal/Core/Render/Element/SvgUse.php
@@ -0,0 +1,38 @@
+<?php
+
+namespace Drupal\Core\Render\Element;
+
+/**
+ * Provides an SVG use element.
+ *
+ * Usage example:
+ * @code
+ * $form['icon'] = [
+ *   '#type' => 'svg',
+ *   '#attributes' => [
+ *     'width' => 32,
+ *     'height' => 32,
+ *   ],
+ * ];
+ * $form['icon']['configure'] = [
+ *   '#type' => 'svg_use',
+ *   '#attributes' => [
+ *     'xlink:href' => '#configure',
+ *   ],
+ * ];
+ * @endcode
+ *
+ * @RenderElement("svg_use")
+ */
+class SvgUse extends RenderElement {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getInfo() {
+    return [
+      '#theme_wrappers' => ['svg_use'],
+    ];
+  }
+
+}
diff --git a/core/modules/system/templates/svg-g.html.twig b/core/modules/system/templates/svg-g.html.twig
new file mode 100644
index 0000000..7aee464
--- /dev/null
+++ b/core/modules/system/templates/svg-g.html.twig
@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Default theme implementation of an SVG g element.
+ *
+ * Available variables:
+ * - attributes: Any attributes to add to the SVG g element.
+ * - children: Any children elements.
+ *
+ * @see template_preprocess_svg_g()
+ *
+ * @ingroup themeable
+ */
+#}
+<g{{ attributes }}>{{ children }}</g>
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
+  <rect x="8" y="8" width="16" height="16"></rect>
+  <use xlink:href="#configure" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
+  <g><rect x="0" y="0" width="16" height="16"><title>Rectangle</title></rect>
+  </g>
+
+</svg>
diff --git a/core/modules/system/templates/svg-rect.html.twig b/core/modules/system/templates/svg-rect.html.twig
new file mode 100644
index 0000000..fb98e98
--- /dev/null
+++ b/core/modules/system/templates/svg-rect.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation of an SVG rect element.
+ *
+ * Available variables:
+ * - attributes: Any attributes to add to the SVG rect element.
+ * - children: Any children elements.
+ *
+ * @see template_preprocess_svg_rect()
+ *
+ * @ingroup themeable
+ */
+#}
+<rect{{ attributes }}>{{ children }}</rect>
diff --git a/core/modules/system/templates/svg-use.html.twig b/core/modules/system/templates/svg-use.html.twig
new file mode 100644
index 0000000..1243132
--- /dev/null
+++ b/core/modules/system/templates/svg-use.html.twig
@@ -0,0 +1,19 @@
+{#
+/**
+ * @file
+ * Default theme implementation of an SVG use element.
+ *
+ * Available variables:
+ * - attributes: Any attributes to add to the SVG use element.
+ * - children: Any children elements.
+ *
+ * @see template_preprocess_svg_use()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set attributes = attributes
+    .setAttribute('xmlns:xlink', attributes['xmlns:xlink']|default("http://www.w3.org/1999/xlink"))
+%}
+<use{{ attributes }}>{{ children }}</use>
diff --git a/core/modules/system/templates/svg.html.twig b/core/modules/system/templates/svg.html.twig
new file mode 100644
index 0000000..b489985
--- /dev/null
+++ b/core/modules/system/templates/svg.html.twig
@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Default theme implementation of an SVG element.
+ *
+ * Available variables:
+ * - attributes: Any attributes to add to the SVG element.
+ * - children: Any children elements.
+ *
+ * @see template_preprocess_svg()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set attributes = attributes
+    .setAttribute('xmlns', xmlns|default("http://www.w3.org/2000/svg"))
+%}
+<svg{{ attributes }}>
+  {{ children }}
+</svg>
diff --git a/core/tests/Drupal/Tests/Core/Render/Element/SvgGTest.php b/core/tests/Drupal/Tests/Core/Render/Element/SvgGTest.php
new file mode 100644
index 0000000..d84725d
--- /dev/null
+++ b/core/tests/Drupal/Tests/Core/Render/Element/SvgGTest.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Drupal\Tests\Core\Render\Element;
+
+use Drupal\Core\Render\Element\SvgG;
+use Drupal\Tests\UnitTestCase;
+
+/**
+ * @coversDefaultClass \Drupal\Core\Render\Element\SvgG
+ * @group Render
+ */
+class SvgGTest extends UnitTestCase {
+
+  /**
+   * @covers ::getInfo
+   */
+  public function testGetInfo() {
+    $svg = new SvgG([], 'test', 'test');
+    $info = $svg->getInfo();
+    $this->assertArrayHasKey('#theme_wrappers', $info);
+  }
+
+}
diff --git a/core/tests/Drupal/Tests/Core/Render/Element/SvgRectTest.php b/core/tests/Drupal/Tests/Core/Render/Element/SvgRectTest.php
new file mode 100644
index 0000000..ddd37a9
--- /dev/null
+++ b/core/tests/Drupal/Tests/Core/Render/Element/SvgRectTest.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Drupal\Tests\Core\Render\Element;
+
+use Drupal\Core\Render\Element\SvgRect;
+use Drupal\Tests\UnitTestCase;
+
+/**
+ * @coversDefaultClass \Drupal\Core\Render\Element\SvgRect
+ * @group Render
+ */
+class SvgRectTest extends UnitTestCase {
+
+  /**
+   * @covers ::getInfo
+   */
+  public function testGetInfo() {
+    $svg = new SvgRect([], 'test', 'test');
+    $info = $svg->getInfo();
+    $this->assertArrayHasKey('#theme_wrappers', $info);
+  }
+
+}
diff --git a/core/tests/Drupal/Tests/Core/Render/Element/SvgTest.php b/core/tests/Drupal/Tests/Core/Render/Element/SvgTest.php
new file mode 100644
index 0000000..eab3d40
--- /dev/null
+++ b/core/tests/Drupal/Tests/Core/Render/Element/SvgTest.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Drupal\Tests\Core\Render\Element;
+
+use Drupal\Core\Render\Element\Svg;
+use Drupal\Tests\UnitTestCase;
+
+/**
+ * @coversDefaultClass \Drupal\Core\Render\Element\Svg
+ * @group Render
+ */
+class SvgTest extends UnitTestCase {
+
+  /**
+   * @covers ::getInfo
+   */
+  public function testGetInfo() {
+    $svg = new Svg([], 'test', 'test');
+    $info = $svg->getInfo();
+    $this->assertArrayHasKey('#theme_wrappers', $info);
+  }
+
+}
diff --git a/core/tests/Drupal/Tests/Core/Render/Element/SvgUseTest.php b/core/tests/Drupal/Tests/Core/Render/Element/SvgUseTest.php
new file mode 100644
index 0000000..27b5eb3
--- /dev/null
+++ b/core/tests/Drupal/Tests/Core/Render/Element/SvgUseTest.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Drupal\Tests\Core\Render\Element;
+
+use Drupal\Core\Render\Element\SvgUse;
+use Drupal\Tests\UnitTestCase;
+
+/**
+ * @coversDefaultClass \Drupal\Core\Render\Element\SvgUse
+ * @group Render
+ */
+class SvgUseTest extends UnitTestCase {
+
+  /**
+   * @covers ::getInfo
+   */
+  public function testGetInfo() {
+    $svg = new SvgUse([], 'test', 'test');
+    $info = $svg->getInfo();
+    $this->assertArrayHasKey('#theme_wrappers', $info);
+  }
+
+}
diff --git a/core/themes/stable/templates/misc/svg-g.html.twig b/core/themes/stable/templates/misc/svg-g.html.twig
new file mode 100644
index 0000000..7aee464
--- /dev/null
+++ b/core/themes/stable/templates/misc/svg-g.html.twig
@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Default theme implementation of an SVG g element.
+ *
+ * Available variables:
+ * - attributes: Any attributes to add to the SVG g element.
+ * - children: Any children elements.
+ *
+ * @see template_preprocess_svg_g()
+ *
+ * @ingroup themeable
+ */
+#}
+<g{{ attributes }}>{{ children }}</g>
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
+  <rect x="8" y="8" width="16" height="16"></rect>
+  <use xlink:href="#configure" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
+  <g><rect x="0" y="0" width="16" height="16"><title>Rectangle</title></rect>
+  </g>
+
+</svg>
diff --git a/core/themes/stable/templates/misc/svg-rect.html.twig b/core/themes/stable/templates/misc/svg-rect.html.twig
new file mode 100644
index 0000000..fb98e98
--- /dev/null
+++ b/core/themes/stable/templates/misc/svg-rect.html.twig
@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation of an SVG rect element.
+ *
+ * Available variables:
+ * - attributes: Any attributes to add to the SVG rect element.
+ * - children: Any children elements.
+ *
+ * @see template_preprocess_svg_rect()
+ *
+ * @ingroup themeable
+ */
+#}
+<rect{{ attributes }}>{{ children }}</rect>
diff --git a/core/themes/stable/templates/misc/svg-use.html.twig b/core/themes/stable/templates/misc/svg-use.html.twig
new file mode 100644
index 0000000..1243132
--- /dev/null
+++ b/core/themes/stable/templates/misc/svg-use.html.twig
@@ -0,0 +1,19 @@
+{#
+/**
+ * @file
+ * Default theme implementation of an SVG use element.
+ *
+ * Available variables:
+ * - attributes: Any attributes to add to the SVG use element.
+ * - children: Any children elements.
+ *
+ * @see template_preprocess_svg_use()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set attributes = attributes
+    .setAttribute('xmlns:xlink', attributes['xmlns:xlink']|default("http://www.w3.org/1999/xlink"))
+%}
+<use{{ attributes }}>{{ children }}</use>
diff --git a/core/themes/stable/templates/misc/svg.html.twig b/core/themes/stable/templates/misc/svg.html.twig
new file mode 100644
index 0000000..b489985
--- /dev/null
+++ b/core/themes/stable/templates/misc/svg.html.twig
@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Default theme implementation of an SVG element.
+ *
+ * Available variables:
+ * - attributes: Any attributes to add to the SVG element.
+ * - children: Any children elements.
+ *
+ * @see template_preprocess_svg()
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set attributes = attributes
+    .setAttribute('xmlns', xmlns|default("http://www.w3.org/2000/svg"))
+%}
+<svg{{ attributes }}>
+  {{ children }}
+</svg>