---
description: Scalable Vector Graphics
---

# SVG

[browser]() ⟩ SVG

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
* <mark style="color:yellow;">**SVG**</mark> tags (although can be included within HTML) are <mark style="color:yellow;">**XML**</mark> tags, <mark style="color:red;">**not**</mark> <mark style="color:orange;">**HTML**</mark> tags.
* to **create&#x20;**<mark style="color:yellow;">**SVG**</mark>**&#x20;elements** with <mark style="color:yellow;">**JavaScript**</mark>, <mark style="color:red;">**can’t use**</mark> [createElement()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement), <mark style="color:orange;">**must**</mark> use [createElementNS()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS), which takes an <mark style="color:yellow;">**XML namespace**</mark>**&#x20;string** (for SVG, it's <mark style="color:green;">`"http://www.w3.org/2000/svg"`</mark>) as its **first argument**.
{% endhint %}
{% endtab %}

{% tab title="🔴 主題" %}
* [svgelement](svg/svgelement "mention") - create/configure SVG element.
* [examples](svg/examples "mention")
  * [pie-chart](svg/examples/pie-chart "mention") - create SVG with JS
  * [clock](svg/examples/clock "mention") - inline HTML (\<svg> tag)
{% endtab %}

{% tab title="💈範例" %}
* inline SVG (in HTML)

{% hint style="info" %}
- SVG and all of its **descendant shapes** are “in the **DOM**", you have the same access and control over them that you would over any other element.&#x20;
- These things are **unique** to **inline SVG**.

💈範例： [clock](svg/examples/clock "mention")
{% endhint %}

```html
<svg viewBox="0 0 100 100">
   <rect x="10" y="10" width="100" height="100" />
   <!-- and all the shapes you need! —>
</svg>
```



* image / background image (in HTML/CSS)

```html
<img src="leaf-maple.svg">
```

```css
.svg-bg {
   background-image: url(bg.svg);   /* background image */
}
```
{% endtab %}

{% tab title="💎 資源" %}
* [SVG Repo](https://www.svgrepo.com/)
* [Tabler Icons](https://tablericons.com/)
* [10 open source SVG icon libraries](https://themesberg.com/blog/open-source/10-open-source-free-svg-icon-libraries)
{% endtab %}

{% tab title="📗 參考" %}
* [ ] JavaScript: The Definitive Guide (15.7 SVG)
{% endtab %}

{% tab title="📘 手冊" %}
* [document](dom/type/document "mention") ⟩ [.createElementNS()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS) - to create SVG elements.
{% endtab %}
{% endtabs %}

## Code Snippet

{% tabs %}
{% tab title="code" %}
:floppy\_disk: [https://replit.com/@pegasusroe/SVG-sprite](https://replit.com/@pegasusroe/SVG-sprite)

```markup
<!-- ⭐️
        `width="0" height="0"` or
        `display="none"`
        prevent SVG from being rendered
-->
<svg width="0" height="0">

        <!-- ⭐️ definitions to be used later -->
        <defs>
            <!-- ⭐️ `g` for group, much like `div` in HTML -->
            <g id="xxx">
                <path d="">
                <path d="">
            </g>
        </defs>

        <!-- ⭐️ SVG will NOT draw `symbol`, it's just a definition -->
        <symbol id="twitter" viewBox="0 0 100 100">
            <title>@CoolCompany on Twitter</title>
            <path d="...">
        </symbol>

        <symbol id="codepen" viewBox="0 0 200 175">
            <title>See Our CodePen Profile</title>
            <path d="...">
            <path d="...">
        </symbol>
</svg>

<!-- ⭐️ this will draw an icon here. -->
<svg class="icon" viewBox="0 0 100 100">
        <!-- `title` is for screen reader -->
        <title>@CoolCompany on Twitter</title>
        <!-- ⭐️ use icon with ID "twitter" in definitions -->
        <use xlink:href="#twitter" />
</svg>
```
{% endtab %}

{% tab title="css" %}
```css
.icon {

  /* ⭐️ match font-size */
  width: 1em;
  height: 1em;

  /* ⭐️ match text color */ 
  fill: currentColor; 
}
```
{% endtab %}
{% endtabs %}
