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

🔴 主題

💈範例

💎 資源

📗 參考

📘 手冊

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