ベクターイラストをブログで使用するためにSVGに変換したら、超絶綺麗に表示されました。

Illustrator&Photoshop

Illustratorで描いたイラストをSVGに変換してブログに貼ってみました。

レスポンシブデザインで、デバイスによって画像のサイズが拡大されても非常にきれいに見えておすすめです。

 

今回ブログをリニューアルするにあたって、お問い合わせのページへのリンクにイラストを貼りました。

こちらのイラスト。

これはPNGファイルです。

contact

 

もともとリニューアルの少し前に作ったのですが、リニューアル前はデバイスによって画像の表示が拡大縮小されることを考えて、画像を大きめに作っていました。

PNGやJPGのようなラスター画像だと、拡大表示するとジャギーがでて、逆に縮小するとピクセルが潰れて細かい部分が見えにくくなったりします。

 

スポンサーリンク

SVGって?

SVG(Scalable Vector Graphics)とは、ベクターデータでできた画像ファイルです。

解像度という概念を持たないベクターデータなので、Illustratorなどと同じように、拡大表示しても画質が落ちません。

Webブラウザのように解像度の低い環境でも、きれいなグラフィックデータを表示することができます。

基本的にIllustratorでフルベクターイラストを描いている僕にとって、これは試す価値あり。

上のイラストでSVGを作成してみました。

 

スポンサーリンク

IllustratorからSVGを作る

IllustratorからSVGを作る方法はとても簡単でした。

こちらのサイトを参考にしました。

 

SVGの書き出しおよび表示方法
イラレを使用したSVGの書き出し方法およびHTMLへの表示方法を詳しく解説しました。

 

アピアランスの分割とテキストのアウトライン化をした状態。

アピアランスの分割とテキストのアウトライン化をした状態

これを「別名で保存…」。ファイル形式でSVGを選択します。

ファイルサイズを小さくするために、「Illustratorの編集機能を保持」のチェックを外して、「OK」。

 

「Illustratorの編集機能を保持」のチェックを外す

 

できたSVG。

 

SVGファイル

 

imgタグを書いたHTMLファイルを作ってブラウザで開くと、このように画像が見られます。

 

ブラウザで開くと画像が見られる

WordPressでSVGを扱えるようにする

デフォルトの状態ではWordPressでSVGを扱うことができません。

扱えるようにするためにはプラグインを使う方法もありますが、僕は下記のページを参考にfunctions.phpに追記しました。

 

WordPressでSVGファイルを取り扱う | 株式会社なないろ(サイト公開終了)

 

サーバーによってはWordPressをインストールしたフォルダの.htaccessにSVGの使用を許可するための記述を追加しなければいけません。

僕の使っているロリポップでも必要だったので、下記のページを参考にして追加しました。

 

SVG がうまく表示されない場合は、サーバーの設定を確認してみる – mzmjp.net::blog
いつものように、詰まった作業に関しての個人的な備忘録。今回は、ブラウザで SVG がうまく表示されなかった際には、サーバーの設定を確認してみましょう、というお話。詰まった箇所このブログのフッターにある...

 

ここまでやって、メディアライブラリにSVGファイルをアップロード。

 

メディアライブラリにSVGファイルをアップロード

 

サムネイルが見えませんが、クリックして「さらに詳細を編集」すると見えます。

ググってみると、サムネイルが表示されるという記述と表示されないという記述が両方見られるので、どっちが正しいのか、それともサーバーなど環境によって違うのか分かりません。

 

SVGが表示された

imgタグでSVG画像を挿入してみます。

画質比較のために、横幅600pxでサイズを合わせて表示しています。

 

こちらがPNG。Illustratorから横幅400pxで作ったPNGを600pxに拡大表示しています。

 

contact-PNGファイル

 

そしてこちらがSVG。上と同じIllustratorファイルからSVGを作りました。

同じく横幅600pxで表示。

contactimg-SVGファイル

 

一目瞭然ですね!

SVGは輪郭くっきり、とてもきれいに表示されていますね。

ここまで違うと、絵の雰囲気自体が変わってくるなあ…

 

僕のイラストとSVGは相性がいい

これはいいなあ。

ふだんIllustratorで描いているのがこういうときに活きてくる。

でもあまりきれいだと粗が見えちゃうかも…(笑)

 

Illustratorでイラストを描いている僕にとって、SVGは相性がいいようです。

Webの他に電子書籍などにも使っても画質が落ちずに綺麗に見せられますね!

ご依頼いただければ描かせていただきますよ。

いかがでしょうか?

 

Illustrator&Photoshop
この記事が役に立った/気に入ったら
ぜひ「いいね!」してください!
最新情報をお届けします。
ブログを応援したい!と思ったら

記事が役に立った!面白かった!/ブログを応援したい! と思っていただけたら、こちらのボタンからいろいろな形で応援していただけます。

スポンサーリンク
このブログの著者
はらだよしのり

メインの活動は絵を描く人。
ウェブサイト humming studio - はらだよしのりイラストレーションワークス - にて活動や作品を公開しています。イラスト関連に限らず、MacやiPhoneに関連した記事やその他自分の体験した出来事の記事などオールジャンルで更新していきます。

はらだよしのりをフォローする
 
はらだよしのりをフォローする
ハミングスタジオブログ
タイトルとURLをコピーしました