Illustrator と svg 要素の viewBox 属性
本記事中に出てくるアプリケーションのヴァージョン。
- Illustrator
- Illustrator CS2/CS4。
- Firefox
- 3.6.12。
- Apache Batik
- 1.7。
svg 要素の viewBox 属性で、ユーザー単位を設定できるわけだけれども、レンダラーによっておかしな振る舞いをすることがある。
Illustrator に SVG ファイルを配置すると線幅の解釈を間違う。stroke-width に単位をつけなかったら*1、 viewBox を考慮せず、point として扱う。
下の SVG データはユーザー単位として"mm"になるように viewBox 属性を設定している。
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="50mm" height="50mm" viewBox="0 0 50 50"> <!-- 図01 --> <rect x="0" y="0" width="50" height="50" fill="#B8D8EF"/> <rect x="10" y="10" width="30" height="30" stroke="#000000" stroke-width="4" fill="#FFFFFF"/> </svg>
Firefox など*2で上の内容の SVG ファイルを開くと二つ目の rect 要素の線幅を 4mm として扱ってくれる。Illustrator だと 4pt として扱う……。x 属性や y 属性、width 属性、height 属性などは問題ない。stroke-width 属性だけがおかしい*3。Illustrator はインチやポイント（とくにこっち？）を基本にして動作しているんだろう。だから、"mm"という単位への対応が弱く、ポイントで処理してしまう箇所があるのだろうか？
上の SVG データを "mm" 単位から "pt" 単位にしてみたものが、下の SVG データである。
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="141.7322834645669pt" height="141.7322834645669pt" viewBox="0 0 141.7322834645669 141.7322834645669"> <!-- 図02 --> <!-- 50mm ≒ 141.7322834645669pt、10mm ≒ 28.34645669291339pt、30mm ≒ 85.03937007874016pt、4mm ≒ 11.33858267716536pt。 --> <rect x="0" y="0" width="141.7322834645669" height="141.7322834645669" fill="#B8D8EF"/> <rect x="28.34645669291339" y="28.34645669291339" width="85.03937007874016" height="85.03937007874016" stroke="#000000" stroke-width="11.33858267716536" fill="#FFFFFF"/> </svg>
こちらは、まあ、望むとおりの図が Illustrator に配置される。Illustrator で利用したい SVG ファイルはポイント単位で作ってやる必要がありそうだ*4。
つか、Illustrator がはき出す SVG ファイル見てみたら、単位ついてない。んで、その数値と Illustrator 上で描画される図の、線の長さだの幅だの見てると、SVG ファイル中の数値は全部ポイント換算だな……。Adobe のテックノートに [SVG ファイル取込時に ［ラスター品質］ の dpi の値を大きくすると画像が小さく取り込まれる] なんてのもあった。Illustrator 10 以降、svg 要素の width、height 属性は数値だけ、"pt"と単位をつけてはき出さなくなったようだ……。そりゃ、FrameMaker も "px" 単位で読み込む。その仕様で正しいもの。んで、"px"単位で図を扱ってるんだから、dpi高めたら図は小さくなるよね……。別にIllustratorが扱う SVG ファイルがポイント単位以外考えて無くてもいい。いいけど、単位をなんも出力しないってのは他のアプリケーションが困るから（実際、自社のFremaMaker使っている人が困っている）、それはやめなよ……。ほんとに、Illustrator 向け SVG ファイルの単位は、ポイント以外は考えないほうがよさそうだ。
もひとつ実験してみる。Illustrator だと下をポイント単位で読み込む（図02と図03が同じになる）。ほかのレンダラーだと"px"単位で読み込む（図02と図03が別物になる）。
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="141.7322834645669" height="141.7322834645669" viewBox="0 0 141.7322834645669 141.7322834645669"> <!-- 図03 --> <!-- 50mm ≒ 141.7322834645669pt、10mm ≒ 28.34645669291339pt、30mm ≒ 85.03937007874016pt、4mm ≒ 11.33858267716536pt。 --> <rect x="0" y="0" width="141.7322834645669" height="141.7322834645669" fill="#B8D8EF"/> <rect x="28.34645669291339" y="28.34645669291339" width="85.03937007874016" height="85.03937007874016" stroke="#000000" stroke-width="11.33858267716536" fill="#FFFFFF"/> </svg>
