GNU Emacs Lisp Reference Manual: SVG Images

40.17.6 SVGイメージ

SVG (Scalable Vector Graphics: 変倍ベクタ図形)はイメージを指定するためのXMLフォーマットです。SVGイメージは、追加で以下のイメージディスクリプタプロパティをサポートします:

:foreground foreground: foregroundが非nilなら、カラーを指定する文字列であること。これはイメージのフォアグラウンドカラーとして使用される。値がnilの場合のデフォルトはカレントフェイスのフォアグラウンドカラー。
:background background: backgroundが非nilなら、カラーを指定する文字列であること。これはイメージが透明度をサポートする場合に、イメージのバックグラウンドカラーとして使用される。値がnilの場合のデフォルトはカレントフェイスのバックグラウンドカラー。
:css css: cssが非nilなら、イメージ生成時に使用されるデフォルトCSSをオーバーライドするCSSを指定する文字列であること。

SVG library

SVGサポートつきでEmacsがビルドされていれば、以下のsvg.elライブラリー由来の関数でこれらのイメージの作成や操作ができます。

Function: svg-create width height &rest args

指定したサイズで新たにSVGイメージを作成する。argsはplist引数であり、以下を指定できる:

:stroke-width: 作成するすべてのラインのデフォルト幅(ピクセル単位)。
:stroke: 作成するすべてのラインのデフォルトのストロークカラー。

この関数はSVGオブジェクト (SVGイメージを指定するLispデータ構造)をリターンする。以下の関数はすべてこのブジェクトにたいして機能する。以下の関数の引数svgはこのようなSVGオブジェクトを指定する。

Function: svg-gradient svg id type stops

svgに識別子idでグラデーションを作成する。typeはグラデーションタイプでlinearかradialのいずれかを指定する。stopsはパーセント割合/カラーのペアからなるリスト。

以下は最初の赤から25%の緑、最後は青に至る線形グラデーションを作成する:

(svg-gradient svg "gradient1" 'linear
              '((0 . "red") (25 . "green") (100 . "blue")))

作成(およびSVGオブジェクトに挿入)されたグラデーションは、後でシェイプを作成するすべての関数で使用できる。

以下の関数はすべてさまざまな属性のデフォルト値を変更するオプションのキーワードパラメーターを受け取ります。有効な属性には以下が含まれます:

:stroke-width: ラインとソリッドシェイプ枠線の描画幅(ピクセル単位)。
:stroke-color: ラインとソリッドシェイプ枠線の描画カラー。
:fill-color: ラインとソリッドシェイプに使用するカラー。
:id: シェイプの識別子。
:gradient: 与えられた場合には以前に定義されたグラデーションオブジェクトの識別子であること。
:clip-path: クリックパスの識別子。

Function: svg-rectangle svg x y width height &rest args

左上隅が位置x/y、サイズがwidth/heightの矩形をsvgに追加する。

(svg-rectangle svg 100 100 500 500 :gradient "gradient1")

Function: svg-circle svg x y radius &rest args: 中央が位置x/y、半径がradiusの円をsvgに追加する。

Function: svg-ellipse svg x y x-radius y-radius &rest args: 中央が位置x/y、水平半径がx-radius、垂直半径がy-radiusの楕円をsvgに追加する。

Function: svg-line svg x1 y1 x2 y2 &rest args: 始点がx1/y1、終点がx2/y2の線をsvgに追加する。

Function: svg-polyline svg points &rest args

points (XとYの位置ペアのリスト)を通過する複数セグメントラライン、いわゆる“ポリゴン(polyline)”をsvgに追加する。

(svg-polyline svg '((200 . 100) (500 . 450) (80 . 100))
              :stroke-color "green")

Function: svg-polygon svg points &rest args

ポリゴン外周の位置XとYのペアからなるリストであるようなpointsにより記述されるポリゴンをsvgに追加する。

(svg-polygon svg '((100 . 100) (200 . 150) (150 . 90))
             :stroke-color "blue" :fill-color "red")

Function: svg-path svg commands &rest args

commandsに応じてsvgにシェイプのアウトラインを追加する。SVG Path Commandsを参照のこと。

デフォルトでは絶対座標。最後(または最初)の位置を基準に相対座標を指定するには、属性:relativeにtをセットする。この属性は関数や個々のcommandsにたいして指定できる。関数に指定された場合には、すべてのcommandsはデフォルトで相対座標を使用する。個々のcommandsに絶対座標を使用させるなら、:relativeにnilをセットする。

(svg-path svg
	  '((moveto ((100 . 100)))
	    (lineto ((200 . 0) (0 . 200) (-200 . 0)))
	    (lineto ((100 . 100)) :relative nil))
	  :stroke-color "blue"
	  :fill-color "lightblue"
	  :relative t)

Function: svg-text svg text &rest args

指定したtextをsvgに追加する。

(svg-text
 svg "This is a text"
 :font-size "40"
 :font-weight "bold"
 :stroke "black"
 :fill "white"
 :font-family "impact"
 :letter-spacing "4pt"
 :x 300
 :y 400
 :stroke-width 1)

Function: svg-embed svg image image-type datap &rest args

埋め込みの(ラスター)イメージをsvgに追加する。datapがnilならimageはファイル名、それ以外ならimageはイメージデータをrawバイトとして含む文字列であること。image-typeは"image/jpeg"のようなMIMEイメージタイプであること。

(svg-embed svg "~/rms.jpg" "image/jpeg" nil
           :width "100px" :height "100px"
           :x "50px" :y "75px")

Function: svg-embed-base-uri-image svg relative-filename &rest args

svgにrelative-filenameにある埋め込み(ラスター)イメージを追加する。relative-filenameはsvgのイメージプロパティ:base-uriのfile-name-directory内部で検索される。:base-uriは作成する(存在しないかもしれない)svgイメージのファイル名を指定するので、すべての埋め込みファイルは:base-uriファイル名の電子に相対的に検索される。:base-uriが省略された場合には、svgイメージをロードするファイル名を使用する。svg-embedと比較してlibrsvgが処理を直接行うので、:base-uriの使用は巨大なイメージの埋め込みの効率を改善する。

;; Embeding /tmp/subdir/rms.jpg and /tmp/another/rms.jpg
(svg-embed-base-uri-image svg "subdir/rms.jpg"
           :width "100px" :height "100px"
           :x "50px" :y "75px")
(svg-embed-base-uri-image svg "another/rms.jpg"
           :width "100px" :height "100px"
           :x "75px" :y "50px")
(svg-image svg :scale 1.0
           :base-uri "/tmp/dummy"
           :width 175 :height 175)

Function: svg-clip-path svg &rest args

svgにクリッピングパスを追加する。:clip-pathプロパティを通じてシェイプに適用された場合には、クリッピング外部のシェイプ部分は描画されない。

(let ((clip-path (svg-clip-path svg :id "foo")))
  (svg-circle clip-path 200 200 175))
(svg-rectangle svg 50 50 300 300
               :fill-color "red"
               :clip-path "url(#foo)")

Function: svg-node svg tag &rest args

カスタムノードtagをsvgに追加する。

(svg-node svg
          'rect
          :width 300 :height 200 :x 50 :y 100 :fill-color "green")

Function: svg-remove svg id: svgから識別子idの要素を取り除く。

Function: svg-image svg: 最後にsvg-imageは引数としてSVGを受け取り、insert-imageのような関数での使用に適したイメージオブジェクトをリターンする。

以下は円のイメージを作成して挿入する完全な例です:

(let ((svg (svg-create 400 400 :stroke-width 10)))
  (svg-gradient svg "gradient1" 'linear '((0 . "red") (100 . "blue")))
  (svg-circle svg 200 200 100 :gradient "gradient1"
                  :stroke-color "green")
  (insert-image (svg-image svg)))

SVG Path Commands

SVGパス(SVG paths)によりライン(lines: 線)、カーブ(curves: 曲線)、アーク(arcs: 円弧)、またはその他の基本的なシェイプを組み合わせて複雑なイメージを作成できます。以下に説明する関数でLispプログラムからSVGパスコマンドを呼び出すことができます。

Command: moveto points

pointsの最初のポイントにペンを移動する。それ以降のポイントはラインで接続される。pointsはXY座標ペアのリスト。後続のmovetoコマンドは新たなサブパス(subpath)の開始を表す。

(svg-path svg '((moveto ((200 . 100) (100 . 200) (0 . 100))))
          :fill "white" :stroke "black")

Command: closepath

サブパスの初期ポイントに接続することによりカレントのサブパスを終了する。ラインは接続に沿って描画される。

(svg-path svg '((moveto ((200 . 100) (100 . 200) (0 . 100)))
                (closepath)
                (moveto ((75 . 125) (100 . 150) (125 . 125)))
                (closepath))
          :fill "red" :stroke "black")

Command: lineto points

カレントのポイントからpoints (XY位置ペアのリスト)の最初の要素にラインを描画する。複数ポイントを指定するとポリライン(polyline: 折れ線)を描画する。

(svg-path svg '((moveto ((200 . 100)))
                (lineto ((100 . 200) (0 . 100))))
          :fill "yellow" :stroke "red")

Command: horizontal-lineto x-coordinates

カレントポイントからx-coordinatesの最初の要素へ水平ラインを描画する。通常は無意味だが複数座標の指定は可能。

(svg-path svg '((moveto ((100 . 200)))
                (horizontal-lineto (300)))
          :stroke "green")

Command: vertical-lineto y-coordinates

垂直ラインを描画する。

(svg-path svg '((moveto ((200 . 100)))
                (vertical-lineto (300)))
          :stroke "green")

Command: curveto coordinate-sets

coordinate-setsの最初の要素を使用して、カレントポイントからベジェ曲線(cubic Bézier curve)を描画する。複数の座標セットがあればポリベジェ(polybezier: 複数のベジェ曲線)を描画する。座標セットはそれぞれ(x1 y1 x2 y2 x y)という形式のリストであり、(x, y)はカーブの終点。(x1, y1)と(x2, y2)はそれぞれ先頭ポイントと終点ポイントを制御する。

(svg-path svg '((moveto ((100 . 100)))
                (curveto ((200 100 100 200 200 200)
                          (300 200 0 100 100 100))))
          :fill "transparent" :stroke "red")

Command: smooth-curveto coordinate-sets

coordinate-setsの最初の要素を使用して、カレントポイントから三次ベジェ曲線(cubic Bézier curve)を描画する。複数の座標セットがあればポリベジェ(polybezier: 複数のベジェ曲線)を描画する。座標セットはそれぞれ(x2 y2 x y)という形式のリストであり、(x, y)はカーブの終点、(x2, y2)は対応するコントロールポイント。前のコマンドがcurvetoかsmooth-curvetoなら、そのコマンドの2つ目のコントロールポイントのカレントポイントから相対的なリフレクション(reflection)。それ以外なら最初のコントロールポイントはカレントポイントと一致する。

(svg-path svg '((moveto ((100 . 100)))
                (curveto ((200 100 100 200 200 200)))
                (smooth-curveto ((0 100 100 100))))
          :fill "transparent" :stroke "blue")

Command: quadratic-bezier-curveto coordinate-sets

coordinate-setsの最初の要素を使用して、カレントポイントから二次ベジェ曲線(quadratic Bézier curve)を描画する。複数の座標セットがあればポリベジェ(polybezier: 複数のベジェ曲線)を描画する。座標セットはそれぞれ(x1 y1 x y)という形式のリストであり、(x, y)はカーブの終点、(x1, y1)はコントロールポイント。

(svg-path svg '((moveto ((200 . 100)))
                (quadratic-bezier-curveto ((300 100 300 200)))
                (quadratic-bezier-curveto ((300 300 200 300)))
                (quadratic-bezier-curveto ((100 300 100 200)))
                (quadratic-bezier-curveto ((100 100 200 100))))
          :fill "transparent" :stroke "pink")

Command: smooth-quadratic-bezier-curveto coordinate-sets

coordinate-setsの最初の要素を使用して、カレントポイントから二次ベジェ曲線(quadratic Bézier curve)を描画する。複数の座標セットがあればポリベジェ(polybezier: 複数のベジェ曲線)を描画する。座標セットはそれぞれ(x y)という形式のリストであり、(x, y)はカーブの終点。前のコマンドがquadratic-bezier-curvetoかsmooth-quadratic-bezier-curvetoなら、そのコマンドのコントロールポイントのカレントポイントから相対的なリフレクション(reflection)。それ以外なら最初のコントロールポイントはカレントポイントと一致する。

(svg-path svg '((moveto ((200 . 100)))
                (quadratic-bezier-curveto ((300 100 300 200)))
                (smooth-quadratic-bezier-curveto ((200 300)))
                (smooth-quadratic-bezier-curveto ((100 200)))
                (smooth-quadratic-bezier-curveto ((200 100))))
          :fill "transparent" :stroke "lightblue")

Command: elliptical-arc coordinate-sets

coordinate-setsの最初の要素を使用して、カレントポイントから楕円弧(elliptical arc)を描画する。複数の座標セットがあれば一連の楕円弧を描画する。座標セットはそれぞれ(rx ry x y)という形式のリストであり、(x, y)は楕円の終点、(rx, ry)は楕円の半径。リストに属性を追加できる:

:x-axis-rotation: カレントの座標システムのX軸から相対的にローテートされた楕円X軸の度数角度。
:large-arc: tにセットすると、180°以上のアークスイープ(arc sweep)を描画する。それ以外なら180°以下のアークスイープを描画する。
:sweep: tにセットすると正の角度方向(positive angle direction)、それ以外なら負の角度方向(negative angle direction)にアークを描画する。

(svg-path svg '((moveto ((200 . 250)))
                (elliptical-arc ((75 75 200 350))))
          :fill "transparent" :stroke "red")
(svg-path svg '((moveto ((200 . 250)))
                (elliptical-arc ((75 75 200 350 :large-arc t))))
          :fill "transparent" :stroke "green")
(svg-path svg '((moveto ((200 . 250)))
                (elliptical-arc ((75 75 200 350 :sweep t))))
          :fill "transparent" :stroke "blue")
(svg-path svg '((moveto ((200 . 250)))
                (elliptical-arc ((75 75 200 350 :large-arc t
                                     :sweep t))))
          :fill "transparent" :stroke "gray")
(svg-path svg '((moveto ((160 . 100)))
                (elliptical-arc ((40 100 80 0)))
                (elliptical-arc ((40 100 -40 -70
                                     :x-axis-rotation -120)))
                (elliptical-arc ((40 100 -40 70
                                     :x-axis-rotation -240))))
          :stroke "pink" :fill "lightblue"
          :relative t)