SVG

Table of contents

<svg> 태그 안에 css 또는 js가 있을 경우 xml parser 오류를 방지하기 위해 <![CDATA[...]]> 로 감싸준다.

html

<svg>
    <style>
        <![CDATA[
            .some-style {
                color: blue;
            }
        ]]>
    </style>
</svg>

Curved text with SVG

html

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <path id="text-curve" d="..."></path>
    </defs>
    <text x="20" y="50">
        <textPath href="#text-curve">
            Some text here...
        </textPath>
    </text>
</svg>

Text styling

html

<svg xmlns="http://www.w3.org/2000/svg">
    <text x="20" y="50">
        Some <tspan class="highlight">text</tspan> here...
    </text>
</svg>

Gradient styling

html

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="linear">
            <stop offset="0%" stop-color="yellow"/>
            <stop offset="50%" stop-color="hotpink"/>
            <stop offset="100%" stop-color="deepskyblue"/>
        </linearGradient>
        <radialGradient id="radial">
            ...
        </radialGradient>
        <style>
            <![CDATA[
                .path {
                    fill: url("#linear");
                }
            ]]>
        </style>
    </defs>
    <path class="path" d="..."></path>
</svg>