inkscapeで背景色のあるパターン

inkscapeで背景色のあるパターンを作ってみました。 パターンに使ったのは次の図形。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <path
       d="m 96,239.36218 a 34,34 0 1 1 -68,0 34,34 0 1 1 68,0 z"
       transform="translate(119.73427,157.46458)"
       style="fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
    <path
       d="m 96,239.36218 a 34,34 0 1 1 -68,0 34,34 0 1 1 68,0 z"
       transform="translate(216.73427,175.46458)"
       style="fill:#ff0000;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"/>
    <path
       d="m 297.56552,208.68333 -9.25313,7.80625 c 6.18229,2.06875 11.76459,4.5375 16.94688,7.80625 -23.79921,8.79536 -46.04215,29.49159 -69.7125,58.45 -23.67036,28.95841 -40.44884,58.98957 -50.5875,89.9125 -1.96305,-1.00014 -3.40988,-1.87122 -5.90625,-3.40469 l -1.10625,3.79531 c 4.57258,5.11073 10.88488,5.93749 17.5875,5.19063 l 0.9875,-4.00937 c -2.75653,0.46829 -5.15304,0.19659 -6.8125,-0.60938 9.86134,-30.07707 26.38285,-59.17716 49.7125,-87.71875 21.6834,-26.52756 46.19309,-48.07128 67.375,-57.59375 -8.19581,25.64781 -21.29081,69.7922 -26.9625,163.375 -2.54912,-0.27437 -5.26953,-1.58707 -8.55,-2.7297 l -0.15,4.2703 c 6.63058,3.26758 13.43435,4.40895 20.85,2.4703 l 0.925,-4.76485 c -2.84298,0.81617 -5.3673,1.35287 -8.475,1.03515 5.98887,-98.81634 19.1277,-139.70186 27.075,-163.54375 4.22456,3.42881 6.1543,6.92295 8.82812,11.43125 l 7.71407,-11.13437 c -8.75327,-8.22955 -17.50532,-16.56051 -30.48594,-20.03433 z"
       style="color:#000000;fill:#000000;fill-opacity:1;stroke:none;stroke-width:5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;"/>
</svg>

サクランボっぽい何かです。 inkscapeで作ってプレーンSVGで出力。 コード中のいらなそうな要素をテキストエディタで消しています。 win版inkscape 0.47では読み込めました。 他の環境で読めなかったらゴメンナサイ。

縮小してカーキ色の正方形の上に配置、パターンにしてみました。

パターン↓

パターンで塗りつぶした図形はこんな感じ。

一見良さそうなんですが、ズームの値を変えるとアラが出てしまいます。

拡大率93%にすると↓

ブラウザで表示して拡大縮小したときも同じ様な線が見えることがあります。 どうやら、ベタ塗りとパターン塗りの2つのオブジェクトを使わないとダメなようです。

まずはパターンの図形の方を修正。 パターンの土台になっている四角形を透明にします。 この四角形は、パターンの間隔を開けたいときは必要です。 それがないと、パターンに使う図形がぎっしり詰まって表示されてしまいます。 四角形の塗りつぶしを無効にし、ストロークの塗りを無効&線の太さを0にしてからパターンにしましょう。 四角形は見えなくなるので扱いに注意です。

そして、塗りつぶす図形の方。 パスメニューで塗りつぶしたいオブジェクトのリンクオフセットを作ります。 リンクオフセットと元のオブジェクトはもちろん重なっています。 重なっているオブジェクトはALTキーを押しながら選択して切り替えましょう。 リンクオフセットと元のオブジェクトのどちらが下になるのか確認してませんが、下にある方のオブジェクトを「ストローク塗りなし、ベタ塗りあり」にします。 そして、上にある方のオブジェクトにパターンを配置します。 これで完成。

パターンの土台になっている四角形を使いたくないけど間隔をあけたい場合、編集メニューのXMLエディタを使う必要があります。 方法は2つ。

1つ目の方法、最初にやった通り適当な色の土台でパターンを登録し、XMLエディタで土台だけ消します。 パターンは/svg:svg/svg:defs/svg:patternに登録されています。 その中のsvg:rectを消せばOK。 パターンなどのIDを調べておくと簡単です。

2つ目は、土台の四角形無しでパターン登録して、パターンの幅と高さを調節します。 idでパターンを特定してsvg:patternの属性、widthとheightを編集しましょう。

ちなみに、頑張って自作パターンを作っても現時点ではGoogle Chrome(ver5.0)で見れないようです。 ie8もSVG未対応ですし、ウェブサイトで本格的にSVGが普及するのはもうちょっと先かな?