まとめ 絵画の話

SVGの画像をBloggerにのせる方法。今更

SVGファイルの画像をBloggerでアップできるかテストです。もういい加減、SVGを理解しないと…と思い、Inkscape（インクスケープ）というフリーソフトを使用しSVGファイルを作成しました。まだ、「基本・中級・上級・応用」の「基本」しかやってないのですが、アップできるかテストしたくなったのです。インクスケープはアドビのイラストレターを使ったことのある人なら割と簡単に操作できると思います。アニメーションとか色んなエフェクトとかできるみたいです。しかもテキストエディタを使って後から修正や加工もできる！

天才日記のSVGファイルアップのテストです image/svg+xml 天才日記のSVGファイルアップのテストです 天才日記のために作ったSVG画像ファイルです。Bloggerに載せてるかテストのためのSVG画像です

SVGすげーーー！

下の画像をご覧ください。このSVG画像データは上の画像と全く同じものです。ただ下の画像データをテキストエディタで開き、サイズ部分 「width="100" height="100"（pixel）」を「width="80%" height="80%"」に変更しています。それ以外は全く同じデータです。それだけでこんなにクッキリの拡大画像ができてしまうのは驚きです！*「width="500" height="500"」で指定したらレスポンシブやスマホで全体表示されなかったです。

天才日記のSVGファイルアップのテストです image/svg+xml 天才日記のSVGファイルアップのテストです 天才日記のために作ったSVGファイルです。

SVGとPNGファイルとの比較

色んな所でSVGについて書かれてると思うのですが、jpg、gif、pngなどのデータは実際のサイズよりも大きくすると文字がボヤケたりジャギったりします。逆に大きすぎるデータの数値を小さくしても綺麗に表現されません。が、SVGだとメチャクチャ綺麗に表現されるのです。

インクスケープからPINGにした画像

上の図は45px角でPNGファイルにエクスポートした画像です。その45pxの画像を400pxに拡大するとボヤケたりギザギザになってしまいます。（下の画像）

拡大し乱れた画像

インクスケープでのSVGファイルとPNGファイルの作り方

下に参考ページを載せているので詳細は書きませんが、PNGファイルはPNGファイルで書き出しでOKです（その他、様々なファイル形式にも対応しています）。SVGファイルもそのまま「別名で保存」で任意の場所を指定し保存したらOKです。*ふつうに「保存」でもいいのですがボクの場合「どこに保存されたのだ！？」と迷う時があるので、どのソフトでも「別名で保存」しています。
【追記】数種類の保存方法（圧縮タイプ）があるので、ソッチのほうがコードが少なくなるのでいいと思います。

保存する際に悩んだのが、どのように書き出すのか？です。下の図にありますが最初の用紙設定がA4サイズになっているので画像サイズに合わせて用紙サイズを設定すると上手くいけました（「ページサイズを描画全体または選択オブジェクトに合わせる」をクリック）。*PNGの場合、画像サイズより少しマージンをとらないと上下左右が少し切れた。SVGはA4サイズで保存されたｗ

ページサイズの設定画面

BloggerにSVGファイルを載せる方法

Bloggerに載せれる画像はJPG、GIF、PNGファイルのみです。（昔はmp4もアップできたのに…）SVGファイルは対応してないので、テキストエディタ（ボクはフリーのTeraPadを使った）でSVGファイルを読み込み「 ＜svg＞ から＜/svg＞ 」をコピー＆ペーストし「投稿」の「HTML」部分に貼り付けただけです。注意したいのは一度「作成」画面に行ってしまうと表示がおかしくなる場合があります。*先程の「width="100" height="100"」はテキストエディタの11行、12行目くらいにあるので「80％」に変更しました。

今回のSVGデータで220行（圧縮して130行）ほどありました。このSVGファイルのコードにテキストの「天」とか書体の「ＤＣＧ麗楷書W5」という記述が見られるのですが、テキストをアウトライン化してるのにそのデータはいるのか？もしかしてもう少しコードを省略できるのでは？と思ってます（追記：省略できる）。関係ないですが、このデータを作成する前に、超複雑な線画のGIFファイルやカレーライスのJPG写真をSVGに変換したデータをテキストエディタで開くと6000行以上（ファイルサイズ2M)にもなってしまいましたｗ

今回のSVGファイルの構成

HTMLで編集していると130行って中々の行数です。（今回2つのSVGを載せているので260行）記事を書くのに上下スクロールでかなりヤヤコシイです。しかしこのSVGファイルは以下の4つオブジェクトのみで描かれてます。上から順に、

  1. 黒い「天」のテキスト（アウトライン化）
  2. 「天の影」（アウトライン化、ボカシ、透明、赤黒い色）
  3. 赤色の真円
  4. 3.より一回り大きい黒色の真円（上下左右をセンターで合わせる）
*3.の赤色の真円に黒色の枠線を付けれるのですが、以前イラストレターで書き出した時に不具合があり（多分、枠のパス取ったら問題ないと思う）今回はテストなので変なところで悩むのが嫌で丸を2つ作成しました。これだけで130行。他サイト見るともっと短いのですが…CSS使ったりして…
もしかしてカレーうどんの写真サイズを小さくしてSVGに変換しテキストエディタでサイズを変更したら軽くなるかも？（追記：写真サイズの大きさは関係ないです。パスや色数などを減らさないとデータは同じ。）

SVGファイルのデメリット？

これだけスゴイSVGファイル（ウィキペディア「1998年に発足し2001年9月4日W3C 勧告となる」）にもかかわらずあまり利用されていない。なによりボクが見た「SVG超オススメ！」と書いているページが、ほとんどSVG画像を使ってないｗ。しかもSVGは画像ファイルだけどXMLという曖昧なもの？なので、このBloggerでも画像として認識されてないようです。（画像の周りの枠線もつかないしサムネイルも出ない）。あと画像検索に引っかかるのか？ということです（追記：画像検索で「filetype:svg　キーワード」で検索できる）。
先日、S匠とSVGについて話ししてたのですがモバイルファーストの時代に大きな画像て必要なのか？っと。スマホも速くなってるし、jpg、gifでも十分軽い…なるほど…何か良い使い方あればいいなーと思いとりあえずアップテストしました。ん？モバイルファーストだからSVGがいいのか？！PC用スマホ用の2つの画像をアップしなくていいし、してないけど…でもPC用に超でかい画像がつかえるぞ！

■Inkscape（インクスケープ・ダウンロード）
https://forest.watch.impress.co.jp/library/software/inkscape/

【 参考サイト】
  • InkscapeでDesign
    http://inkscapedesign.web.fc2.com/index.html
  • SVGのエクスポート
    https://inkscape.paix.jp/manual/document-operations/file/save/svg/
  • Dr.ウーパのコンピュータ備忘録
    http://upa-pc.blogspot.jp/2014/06/blogger-svg.html
  • あとで（いつか）読む
    https://mkasumi.com/activity/entry-775.html
    https://webkikaku.co.jp/blog/webdesign/svg_for_webdesigner/

------
応用編まで目を通したのですが初級編だけでいいかも？それよりもSVGファイルのコードやアップ方法やcssを理解するほうが重要だ！っと思ってます。イラストレターの代替としてはメッチャいいです。古いイラレ使ってたボクにとって。
------Ψ

0 件のコメント :

コメントを投稿