SVG 基礎知識

はじめに

之前に SVG 描辺アニメーションに言及したことがあり、非常に神奇な手書き署名アニメーション効果を実現できます。もちろん、理論的には任意の不規則パス填充アニメーションを実現するために使用できます

SVG をサポートするシナリオでは、強力な SVG 描辺アニメーションの採用を検討でき、いくつかの incredible 効果を実現でき、不規則描辺、填充アニメーションの処理方面で療効確実です

一.互換性

SVG（Scalable Vector Graphics）は XML に基づくマークアップ言語で、二次元ベクトル図を記述するために使用されます

基礎互換性（Can I use SVG）：

デスクトップ [IE9+]
モバイル [Android4.4+] [Android3-4.3] 部分サポート

SVG アニメーション要素互換性（Can I use SVG animation）：

モバイル [Android3+] iOS[6.1+]

モバイル端末では早就に随便に遊べます。例えば animateMotion を使用して不規則パスに沿った運動効果を実現

二.応用シナリオ

1.icon

iconfont 互換性は确实に SVG より良いですが、いくつかの制限があります：

font 関連の CSS ルールのみサポート
ブラウザのフォント最適化（アンチエイリアスなど）により、異なるブラウザ下で icon 表示効果に差異
フォントファイルに依存。糟糕な状況（ダウンロード失敗、またはユーザーがカスタムフォントを偏好）では、枠が表示され、甚至 emoji と衝突

単色またはグラデーションのみ可能で、サイズ位置は line-height, vertical-align, letter-spacing などの影響を受け、実際サイズに偏差が存在（整列が非常に困難）

SVG icon の優勢：

ベクトル図、随便にスケーリング
icon の不同部分のスタイル、描辺色などを制御可能
実際サイズが正確で、占有空間は SVG 要素サイズと一致
糟糕な状況では、png を使用して平滑な fallback を実施

SVG icon に関するより多くの情報については、以下を参照：

2.アニメーション

SVG は animation と結合して多くの神奇な効果を実現できます：

不規則描辺アニメーション（手書き署名）
填充アニメーション（手描き）
不規則パスアニメーション（要素を不規則パスに沿って運動させる）

印象深い SVG アニメーション：Animated line drawing in SVG。より多くの SVG アニメーション案例は 30 Awesome SVG Animation For Your Inspiration を参照

3.チャート

いくつかの非常に人気のあるチャートライブラリは SVG を使用して実装されています。例えば d3、google charts など

canvas チャートと比較して、SVG チャートは遷移アニメーション方面で先天優勢を持ち、非常に漂亮的な遷移効果を実現できます。例えば D3 Tree

三.SVG 要素

SVG には独自の要素定義（HTML 要素と類似）があり、二次元図形を記述するために使用されます。svg タグで包み込み、直接 HTML に埋め込めます。例えば：

<h3>svg demo</h3>
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="30" height="30"></rect>
</svg>
<span>sibling</span>

30x30px の黒方块を表示。svg 要素サイズは 100x100px。svg 要素はデフォルトで display: inline な��で、"sibling" テキストは黒方块と並列

P.S.width, height, x, y などの属性は単位を付けない場合、デフォルトは px。em, ex, in, cm, mm, pt, pc, % などの単位を付けることも可能

SVG 要素は多く、HTML 要素との交集があります。SVG element reference を参照

1.形状要素

基本形状は 6 種類：<circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>。さらに <path> は任意形状を定義するために使用でき、4 種類の基本形状を含みます

rect

<rect x="50" y="10" width="30" height="30" rx="5" ry="5"></rect>

rx, ry は丸角を定義するために使用され、それぞれ四角の楕円が x 軸、y 軸方向の半径を表します。もちろん、丸角で円を描くテクニックは依然として適用可能：

<rect x="50" y="10" width="30" height="30" rx="50%" ry="50%"></rect>

x, y は左上角の座標を表し、座標系は canvas 2d と同じで、左上角が (0, 0)

circle

<circle cx="150" cy="25" r="15"></circle>

cx, cy は円心の位置を表します

ellipse

<ellipse cx="200" cy="30" rx="25" ry="20"></ellipse>

rx, ry はそれぞれ x 軸方向半径と y 軸方向半径を表します

line

<line x1="250" y1="10" x2="300" y2="30" style="stroke: black"></line>

注意、デフォルトでは描辺がなく、線が見えません。ここで stroke を使用して描辺色を設定

polygon

<polygon points="60,50 100,70 100,110 60,130 20,110 20,70"></polygon>

一組の点を指定し、閉じた多角形を描画

polyline

<polyline points="150,50 190,70 190,110 150,130 110,110 110,70" style="fill: none; stroke: black"></polyline>

多角形と類似していますが、折線は首尾を自動接続しません

注意、デフォルトでは黒色で填充され、描辺がありません。上例の多角形と全く区別がありません。ここで fill を使用して填充色を削除し、stroke を使用して黒色描辺を追加

2.path

通用形状定義で、上記で言及したすべての形状を実現するために使用できます。例えば：

<path d="M 10 10 L 100 10 L 100 80 Z" style="fill: orange; stroke: black; stroke-width: 1"></path>

黒色描辺を持ち橘黄色で填充された直角三角形。属性 d は一連のパス記述を表し、いくつかの指令を含みます：

Moveto      M 筆を上げてへ
Lineto      L 直線をへ
            H 水平直線をへ
            V 垂直直線をへ
Curveto     C 三次ベジエ曲線をへ（2 つの制御点を提供する必要あり）
            S 前回の三次ベジエ曲線と接続（2 番目の制御点と終点のみ提供、1 番目の制御点は前回の曲線の 2 番目の制御点の対称点）
            Q 二次ベジエ曲線をへ（1 つの制御点を提供する必要あり）
            T 前回の二次ベジエ曲線と接続（終点のみ提供、制御点は前回の曲線制御点の対称点）
Arcto       A 楕円曲線をへ
ClosePath   Z 現在の点と起点を直線で接続

注意、Z/z でパスを閉じるのは、手動で L 起点 とは異なります。閉じる指令は線分端点を拼接させるためです

各指令の具体的な用法：

M x,y       絶対座標
m dx,dy     相対座標

L/l         同上
H/h         同上
V/v         同上

C/c c1x,c1y c2x,c2y x,y     制御点 1 制御点 2 終点
S/s cx,cy x,y               制御点 2 終点
Q/q cx,cy x,y               制御点 終点
T/t x,y                     終点

A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y
  x,y方向半径 x 軸と水平軸の時計回り夹角 [1/0] 大/小角度弧線 [1/0] 時計/反時計回りで終点へ 終点

Z/z         パラメータなし、Z と z に区別なし

例えば：

<!-- 矩形 -->
<path d="M 10 10 H 70 80 V 70 80 H 10 10 z" style="stroke: black"></path>
<!-- 三次ベジエ曲線 -->
<path d="M 10 10 C 30 40 90 60 30 100 S 50 50 150 10 S 100 130 100 120" style="fill: none; stroke: black"></path>

P.S.d 属性に関するより多くの情報については、以下を参照：

3.テキスト

<text x="100" y="40" dx="10" dy="10" text-anchor="middle" rotate="10 10" style="font-family: Consola monospace; font-size: 24px; stroke: skyblue; fill: pink;">
    SVG text styling
</text>

x, y、dx, dy は位置決めに使用され、前者は絶対位置決め、後者は自身からの相対オフセット。text-anchor はテキストを位置決めるために使用（x, y に対する左/右/中央揃え）

注意：rotate 属性は非常に神奇で、style="transform: rotate(10deg);" の全体回転とは異なり、rotate 属性は文字（glyph）に対するもので、一組の値を伝達でき、順序に従って各文字にそれぞれ作用するため、斜体の効果に類似したものを実現するために使用できます

P.S.rotate 属性に関するより多くの情報については、Chapter 11: Text を参照

4.スタイル

CSS がサポートするスタイル属性の他に、SVG はいくつかの特有のものをサポートします。例えば stroke、fill など。一般的なものは以下の通り：

fill                填充色、テキスト色もこの属性で制御
stroke              描辺色
stroke-width        描辺幅
stroke-linecap      端点スタイル、丸角、直角など、canvas と一致、butt | round | square
stroke-dasharray    点線スタイル

CSS セレクターを通じて SVG 要素にスタイルを適用することもできます。例えば：

<style>.line {stroke: red;}</style>
<svg>
    <line class="line" x1="10" y1="10" x2="100" y2="80"></line>
</svg>

しかし SVG 内の style 要素は HTML とは異なり、上記の方式は以下と同等：

<svg>
    <style><![CDATA[
    .newLine {stroke: red;}
    ]]></style>
    <line class="newLine" x1="10" y1="10" x2="100" y2="80"></line>
</svg>

スタイルルールを CDATA で包むのは XML 解析エラーを避けるため：

Note how the CSS style sheet is placed within a CDATA construct (i.e., ). Placing internal CSS style sheets within CDATA blocks is sometimes necessary since CSS style sheets can include characters, such as ">", which conflict with XML parsers. Even if a given style sheet does not use characters that conflict with XML parsing, it is highly recommended that internal style sheets be placed inside CDATA blocks.

（Styling-SVG 1.1(Second Edition) より引用）

5.marker

marker マークは図形要素に貼り付けられます。例えば marker を使用して矢印を追加：

<defs>
    <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="6" markerHeight="6" orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
</defs>

<path d="M 10 10 C 50 80 40 20 120 50" fill="none" stroke="black" stroke-width="1" marker-end="url(#Triangle)"></path>

defs を通じて再利用可能な要素を定義し、id を通じて之前に定義した marker 要素を参照。url(#Triangle) は Functional IRI reference と呼ばれます

ここで矢印を定義し、パス曲線の終点に追加。選択可能な位置は：

marker-start    起点
marker-mid      各中間点
marker-end      終点

marker 各属性の意味は以下の通り：

viewBox             座標系領域
refX/Y              参照点、描画時に該点が端点と重合
markerUnits         座標系単位を定義 userSpaceOnUse 現在の座標系単位 | strokeWidth 線幅（デフォルト）
markerWidth/Height  マークの幅高さ、デフォルト値は 3
orient              描画方向、値は auto または角度値

デフォルト markerUnits="strokeWidth" は図形線幅に基づいて marker サイズを自動適応。markerUnits="userSpaceOnUse" の場合、marker 単位を現在の座標系単位に指定し、図形線幅に対して相対調整しません

デフォルト orient="auto" は朝向角度を自動計算。曲線上の矢印は斜率方向を指し、非常に精細自然

P.S.marker に関するより多くの情報については、11 Painting: Filling, Stroking and Marker Symbols を参照

6.フィルター

filter を適用してレンダリング効果を変更し、表示効果をより良くします。使用方式は marker と類似：

<defs>
    <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
    </filter>
</defs>

<path d="M 10 20 C 50 80 40 20 120 60" fill="none" stroke="black" stroke-width="1" filter="url(#blur)"></path>

feGaussianBlur 要素を通じてガウスぼかしフィルター（毛ガラス効果）を定義し、ぼかし程度パラメータ stdDeviation を設定。in はフィルターを適用するオブジェクトを設定するために使用。ここで SourceGraphic は原図を表し、alpha チャンネルまたは背景画像（フィルターを適用した整片領域スナップショット）のみに適用することも可能

さらにシャドウ、光照、色などのフィルターをサポート。詳細情報は SVG element reference を参照

7.グラデーション

線形グラデーションと放射性グラデーションをサポート。使用方式は marker と類似。例えば：

<defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="#000"/>
        <stop offset="100%" stop-color="#fff"/>
    </linearGradient>
    <radialGradient id="radial">
        <stop offset="10%" stop-color="#eee"/>
        <stop offset="95%" stop-color="#ccc"/>
    </radialGradient>
</defs>

<rect x="0" y="0" width="100%" height="50%" fill="url(#linear)"></rect>
<rect x="0" y="50%" width="100%" height="50%" fill="url(#radial)"></rect>

それぞれ純黒から純白への垂直線形グラデーション、中心が明るく周囲が漸暗の放射性グラデーションを定義

四.オンライン Demo

上文で言及したすべての示例：http://www.ayqy.net/temp/svg/svg.html