高解像度でもキレイ!SVG

1年間何もしていなかったツケで、先週は確定申告の作業に終われ、更新が滞ってしまいました…。晴れて確定申告の作業も終わったと思った矢先、花粉なのか風邪なのかよく分からない喉の痛みが…。ガラガラ声っす。涙
 
さてそんな中今日のお題は・・・「高解像度でもキレイ!SVG」 デス。
SVGってなんぞや?って話ですが、「Scalabel Vector Graphics」の略です。いわゆるイラストレーターなどで扱うベクターデータです。
JPEG画像とは違ってどれだけ拡大しようとも荒れない!
最近はスマホやタブレット、MacなんかはRetinaディスプレイなどの高解像度の画面も多くなってきて、それ用に画像を用意する必要があったりしましたが、SVGならどれだけ高解像度になっても関係無し!なので相性バッチリなデータなわけです。

例えば過去に制作したWEBサイトでは、SAMURAI TABIさんのWEBサイトで使用しているロゴ、

↑この「SAMURAI TABI」の部分がSVGファイルを使用しております。
 
ちなみに、SVGファイルはテキストエディタでも開いて編集することも可能で、SVGデータにクラス名などを持たせたりすることもできます。
その他に、アニメーションCSSやJavaScriptを使用して動かしたり、色を変えたり、様々なエフェクトを加えたりすることもできます。が、、、個人的にはその作業は現時点では少々面倒臭いかな。と言う印象です。知識も必要としますしね。
SVGはイラストレーターのメニューで 「ファイル」 > 「保存/別名で保存」 > ファイル形式「SVG(svg)」 保存で出来ます。

WEBサイトで使用する際は、JPEGなどの画像データと同様、 <img src=”images/xxxx.svg” /> のように記述すればOKです。
アニメーションやエフェクトの効果を付与したりするのはまだ少しハードルが高い印象があるので、まずは画像データのように高解像度にも対応できるデータとしてサイトのメインロゴなどをSVGデータに差し替えてみることからはじめてはいかがでしょうか?
これから解像度の高い画面は益々増えてくると思われますので、SVGデータの出番も自ずと増えてくることが予想されますので、早めに扱い方を覚えてしまいましょう!
 

HOW TO ORDER

ご依頼いただく際の主な確認事項

  • ご依頼内容(新規サイト制作・リニューアル・その他)
  • おおよそのページ数
  • ご希望されるデザインイメージ(参考にしたいサイト)
  • スケジュール(公開希望日)
  • ご予算
  • デジタルデータでの原稿や素材の準備状況
  • サーバ・ドメインの取得状況
  • 制作についてご不安な点や現在お困りの点、改善したい点

参考料金

WEBサイト制作・・・4万円〜
CMSご利用の有無、既存テンプレの改修など状況によって料金の変動が御座います。最低金額の目安として頂ければと思います。
DTP(チラシ・名刺)制作・・・2万円〜
A6サイズ両面印刷のチラシデザインの最低金額の目安として頂ければと思います。印刷代金は別途かかります。
  • お問い合わせ
  • ヒアリング・要件定義・ご提案
  • 見積り・制作スケジュール
  • 発注
  • ※以降料金が発生します。

  • 制作
  • 校正・修正
  • 最終校正
  • 納品

CONTACT

お気軽に下記フォームもしくはメールアドレスまでご連絡ください。
ご依頼の方は「HOW TO ORDER」をご確認ください。

お問い合わせ
info@shucreem.com

翌営業日までに返信いたします。

%d人のブロガーが「いいね」をつけました。