« テキスト作成 -2- | トップページ | ページの合成 »

2012年5月 1日 (火)

SVG コードの手直し(または Inkscape 恨み節)

FlatTable の移植で次に予定している作業は手間がかかりそうなので、ちょっと寄り道をして SVG コードの手直しをしました。この手直しもいつかはやらないといけなかったので、それを先にやっただけなのですが。

まず始めたのはコードのダイエットです。FlatTable の画像は Inkscape で作成したのですが、以前に書いたように、座標が使い物にならず手直ししたことが有りました。今回は、Inkscape の生成していたコードで、

    fill-opacity:1
など意味の無い箇所を削除しました。これらに意味が有ることを私が知らないだけなのかも知れませんが、削除しても見た目が変わっていないので、たぶん意味が無いのでしょう。

それに続いて Inkscape 由来のコードも削除しました。Inkscape の生成するコードには Inkscape 由来の属性などが挿入されています。これは Inkscape で作業する時に必要となるのでしょうが FlatTable ではもうこの画像を Inkscape で処理することは無いだろうから、ダイエットのために、それらも削除しました。本来なら、Inkscape に敬意を表してそれらの箇所は残すところなのですが、あんなバカソフトに対してそんな気持ちには成れません。また、改変が禁止されていないか気になりますが、ソフトの性格上、SVG コードの手直しが許されない訳は無いので、たぶん大丈夫でしょう。

さらに、円から円への修正(変な言い方!)も行いました。Inkscape で円を描いても、生成されるコードは path ですが、これを circle に変更したということです。

    使用前
    <path
        style="fill:#666666;fill-opacity:0.6;stroke:none"
            id="path3969-3-3"
            d="m 332.274,146.81255 a 3.8082979,3.8082979 0 1 1
                -7.6166,0 3.8082979,3.8082979 0 1 1 7.6166,0 z"
            transform="matrix(0.525169,0,0,0.525169,331.5,147.8986)" />
    使用後
    <circle
        style="fill:#666666;fill-opacity:0.6;stroke:none"
        cx="504"
        cy="225"
        r="2" />
このコードを見ても判る通り、「使用後」の方はスッキリスリムで、その円はどの位置に有りどれだけの半径なのかがすぐに分かります。一方、「使用前」は、位置も半径もサッパリ分かりません。そもそも、これが円であることもすぐには分かりません。さらに、以前にも書いた「変換」が使用されています(transform)。

因みに Inkscape で円を描くことは出来ません(たぶん)。「私が知らないだけかも」と思って、試しに Ctrl キーや Shift キー等を併用して楕円描画の操作をしてみたのですが、楕円しか描けませんでした。たぶん、円は描けないのでしょう( Ctrl キーを押しながら±45°付近の方向にドラッグすると円になります)。そして、その楕円は ellipse ではなくて path でした。何故なんだ!?

最後にラック部分の三角枠線を修正しました。今までの三角枠線は小さかったので少し広いものに描き替えました。Inkscape で上手に正三角形を描く方法が分からないので、SVG コードを手動計算しました。三角枠線は純粋な三角形ではなくて頂点が丸まっていますが、その計算と描画に煩わされました。そのカーブを初めは円弧で描いたのですが、形が良くなかったので、2次のベジェ曲線に変更しました。ただ、円弧よりも2次のベジェ曲線の方が座標の指定が単純なので反って好都合でした。

配置図例

Inkscape は FlatTable で扱っているような製図的な画像の作図ではなくて、絵画的なものの製作を意図して作られているのかも知れません。そうだとすれば、違う用途に使っているので不満に思うのも当然です(つまり、Inkscape に罪は無い)。因みに、今更ながら思うのですが、製図的な作図の場合 XML エディタで SVG コードを直接編集するのが Inkscape の正しい使い方なのかも知れません。

« テキスト作成 -2- | トップページ | ページの合成 »

ビリヤードの配置図ソフト」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/54605220

この記事へのトラックバック一覧です: SVG コードの手直し(または Inkscape 恨み節):

« テキスト作成 -2- | トップページ | ページの合成 »