42.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の使用は巨大なイメージの埋め込みの効率を改善する。

;; Embedding /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)