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 で扱う場合にエラーになる直接の原因ですが、他にも注意したい箇所がいくつもあるので、順番に解説します。

Padding に auto なんてないんだからね！

CSS の Padding に auto が効かない。

「今日は Padding の効きがよくないな」

スペルチェックやら見直してみても分からない。

もしや！と検索してみるも、色々なところで確かに、padding: auto; と解説がある。

SVG 画像と Google 検索 SEO と HTML5

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

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

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

SVG は画像

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

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

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

Organize Search Engines 後継

Organize Search Engines は FF57 以上で動作しません。Add custom search engine を検討してください。(2024-03-24 記)

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

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

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

Google フォトから直リンクを取得して画像を貼り付ける方法

Google フォトから直リンを取得してウェブサイト上に画像を表示する方法です。

ダイレクトリンクを取得するまでのルートは狭いので細かく説明します。