🔰SVG

Scalable Vector Graphics

browser ⟩ SVG

⭐️ 重點

• SVG tags (although can be included within HTML) are XML tags, not HTML tags.

• to create SVG elements with JavaScript, can’t use createElement(), must use createElementNS(), which takes an XML namespace string (for SVG, it's "http://www.w3.org/2000/svg") as its first argument.

🔴 主題

• SVGElement() - create/configure SVG element.

• SVG examples

  • pie chart - create SVG with JS

  • SVG Clock - inline HTML (<svg> tag)

💈範例

• inline SVG (in HTML)

• 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.

• These things are unique to inline SVG.

💈範例： SVG Clock

<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)

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

.svg-bg {
   background-image: url(bg.svg);   /* background image */
}

💎 資源

• SVG Repo
• Tabler Icons
• 10 open source SVG icon libraries

📗 參考

• JavaScript: The Definitive Guide (15.7 SVG)

📘 手冊

• Document ⟩ .createElementNS() - to create SVG elements.

Code Snippet

code

💾 https://replit.com/@pegasusroe/SVG-sprite

<!-- ⭐️
        `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>

css

.icon {

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

  /* ⭐️ match text color */ 
  fill: currentColor; 
}