2018年4月13日金曜日

Inkscape SVG を Adobe Illustrator ファイルに変換

Inkscape で作成された SVG ファイルを、.ai ファイルに保存して、最終的にプレーン SVG を出力する方法です。

Inkscape SVG を Illustrator で編集して、.svg で出力しようとすると、エラーが表示されたり大きくずれたりします。これは、知らないとまったく理由がわからず対処できません。

この作業を完了できませんでした。不明なエラーが発生しました。

Wikimedia Commons から頂いてきた、Inkscape Logo.svg を例にして解説します。

Inkscape Logo.svg をテキストエディタで開くとすぐに次の構文が見えます。

xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

これは、ネームスペースといって「Inkscape や前身の sodipodi 特有の命令を使います」 という宣言です。

本文にも SVG には見慣れない記述が見つかります。

sodipodi:version="0.32"

inkscape:version="0.48.4 r9939"

これが、Inkscape SVG を Illustrator で扱う場合にエラーになる直接の原因ですが、他にも注意したい箇所がいくつもあるので、順番に解説します。

必要なもの
InkscapeInkscape Portable と Illustrator

Illustrator で編集する前に下ごしらえをします。

  1. Inkscape Logo.svg を Inkscape で開きます。
  2. ファイルメニュー、ドキュメントのクリーンアップ
  3. 名前を付けて保存。プレーン SVG を選択して保存します。
  4. 保存した.svg ファイルをメモ帳などテキストエディタで開きます。

    <title>…</title>

    <metadata>…</metadata>

    を削除します。

まだ不要なネームスペースが残りますが、編集には影響ないのでそのままにします。

SVG を Illustrator で開きます。

この項目が最も重要で、Inkscape SVG 以外の 普通の SVG を扱う場合にも該当します

SVG をそのまま保存してはいけない

新規ドキュメントを作成して、svg のパスをコピーして貼り付けます。こうしないと座標がずれますviewBoxを大きく外れてなにも表示されないこともあります。ずれる理由がないので、おそらく Illustrator のバグです。

一旦、新規ドキュメントを .ai ファイルで保存します。

この状態が、エラーがない svg を出力できる最低ラインですが、もう一つ重要な作業があって、こちらもやったほうが良いです。

transform 属性が付く

出力した.svg に 意図していない transform 属性が付くことがあります。

transform="matrix(0.9905442,0,0,0.9905442,0.6051535,0.604136)"

これも知らないと、ちゃんと表示できているだけに気づかないと思います。

transformが付くのはグループです。

.ai ファイルを開いて、グループ複合パスクリッピングマスクレイヤー を一旦、解除してすぐに元のグループに戻します。グループ アピアランスには注意。

これは、大きなファイルだと対処しきれないので、どこかで妥協することになります。

再グループ化すると、なぜ正しくなるのか不明で これも多分 Illustrator のバグです。

これで完了です。

Inkscape SVG はパスに id が付いているので、削除するとより綺麗になります。

SVGOMG を通すと、不要な id のみ削除できます。オプションの説明が長くなるので解説は省きますが、基本的に SVG ファイルを画面にドロップするだけです。実は先の <title> を削除する手順のところでも SVGOMG を通すとクリーンになります。

自分で作成する時には SVG は必ず最終出力にします。

2017年8月18日金曜日

2017年7月9日日曜日

SVG 画像と Google 検索 SEO と HTML5

Web制作で SVG ベクター画像をよく使っています。経験してみて初めて分かった現在の SVG を取り巻く環境や Google 検索と SVG の関係についての考察記事です。

まだ SVG を使ったサイトさんは少ないですが、ベクトルの画像をWebで表現するには、Flash を除くと、現実的に SVG しかないので、これから増えていくのは確実です。

先行して使ってみての経験則になりますが、ちょっとだけ詳しくなったので、これから SVG を使ってみようというウェブマスターさんの参考になればと思います。

svg logo

SVG は画像

検索エンジンにとって SVG はテキストデータではなく、見ているのは最終的にレンダリングされた画像として見える SVG のみ。

Google 検索が、SVG をインデックスの対象としたのは 2010年9月。その頃から今まで多少の変化は見られますが、認識能力はあまり変わっていない印象を受けます。

Google 検索エンジンは、xlinktitledesctext、著作権情報などの SVG 内の情報を一切見ていない

2017年4月13日木曜日

Organize Search Engines 後継

Firefox アドオンの Organize Search Engine は、検索のパラメーターを簡単に変更設定できる優れた拡張機能でしたが、現在は開発を終了して公開もされていません。

Google.comへ行く方法や余計な検索パラメーターを除いたり、50件表示にするのに必要なので、.xpiファイルを保存して継続して使い続けていましたが、それも、とうとう動作しなくなってしまいました。

Firefoxを低いバージョンのまま維持するのも難しくなって困っているところ、有り難い事に、開発を継続されている方が見えました。

2017年2月1日水曜日

2016年11月22日火曜日

Twitter画像がJPEGへ劣化されるのを回避する方法

TwitterでPNGでシェアした画像が、勝手にJPEGへ変換される。

たまたま、ツイートを見かけたので確認してみると、指摘されたとおり、.Jpgへ劣化している。

元画像.png
no-transparent.png

Twitter画像.jpg
twitter-transparent.jpg

画像を作成して、PNGで保存しているクリエイターなら、これが、いかに哀しい出来事かわかるはず。

「JPEGがいかん!」というわけじゃなくて、JPEGは風景写真などには、とても向いています。ただベクターからおこしたロゴなど輪郭のクッキリした物は、PNGです。JPEGで作られたロゴを、見るひとが見れば一発で見分けがつくほど違います。

これを回避する方法も先ほどのツイートに載っていて、確認もできました。

透過PNGは変換されません。
ただし実際に透過ドットがある必要があります。

この有益な情報を踏まえて、もうひと工夫してみました。


2016年9月28日水曜日

アクセス解析研究所のタグを外部jsに記述する

アクセス解析研究所のタグを外部jsに記述する方法です。

QLOOKアクセス解析は、2016年9月30日に終了します。外部のJavaScriptから解析タグを書き出すようにすれば、全てのページにタグを挿入しなくてもアクセス解析研究所へ瞬時に移行できます。

だだし!自分にJavaScriptの知識はなく、見よう見まねでやったらうまくいったという結果です。

外部.jsファイルにコードを追加します。