もしかしてWebの書き出し、まだpng…!?[webの話] | おむすび

もしかしてWebの書き出し、まだpng…!?[webの話] | おむすび

もしかしてWebの書き出し、まだpng…!?

webの話


こんにちは18号です。

私もついこの前まではpng、jpgで書き出していました。

ある時、デザインサンプルを作るためにWebサイトからロゴをもらおうと
いつも通り、ドラッグ&ドロップでデスクトップにコピーしました。

今まではだいたい拡張子はpngかjpg、たまにgifでした。

しかしそのロゴの拡張子はsvgだったのです!

なぜ…?
調べてみるとsvg書き出し、なかなか良さそうなので、その話です。

▶そもそも.svgとは?

 

wikiからsvg拡張子の特徴を引用しておきます。

 

ベクタ形式であるため、拡縮自在である。その他に、XMLベースの為、ウェブブラウザで(画像として、という意味ではなく、HTMLのソースビュー等と同様に、という意味で)閲覧でき、テキストエディタ等で編集できる。また、HTMLとの親和性により、ハイパーリンクを埋め込んだり、JavaScript 等と連携させることもできる。

 

つまり…

jpg、pngなどはビットマップデータなので拡大すると表示が荒れますが、

svgはベクターデータなのでどんなに拡大しても表示が荒れない!と言うことです。

(イラストレーターデータも同じベクターデータです)

 

 

 

▶svg導入のメリット

 

どんなに拡大しても荒れない!

つまり、様々なスクリーンサイズへの対応が必要になってきている現在のwebデザインにピッタリなのです!

 

CSSで大きさを調整してもOK!

RetinaディスプレイでもOK!

 

ちなみにsvgは余計なパーツが取り除かれるので、ファイルが軽量らしいです。

 

良いことだらけでめちゃくちゃ優秀なSVG!

 

 

▶svg導入の注意点

 

まぁいくら優秀だと言っても、デザイン全てのパーツをsvgで書き出せ!と言うことではなくてですね…

実は写真や色数の多いデザインには向いていません。

 

単色のロゴやアイコン、アニメーションなどが良いとされています。

 

 

あと気になるのは…

svgでサイトにアップすると、そのデータをダウンロードして編集出来てしまうというところです。

ロゴやアイコンがダウンロード出来た所で…って感じもしますが

悪用されたくないデータにはお気を付け下さい。

 

 

▶svg書き出しの方法

 

①新規作成

イラストレーターで「ファイル」>「新規」から作成します。

単位をピクセルにし、作りたいサイズを入力して下さい。

 

 

②データを作成

アートボード内にデータを作成します。

文字データなどは全て「アウトライン化」して下さいね。

 

(ccの選択した時に◎がいっぱい出てくるの、いつも気持ちわる‥ってなります)

 

③svg保存

データが出来たら「ファイル」>「別名で保存」を押して下さい。

この時にファイル形式を「SVG(svg)」に選択して保存をします!

 

保存オプションはそのままOKで大丈夫です。

 

オプションについては色々ありますが、長くなるのでまたいつか書きます…

 

 

▶svgの導入方法

 

svgはタグを使って埋め込み出来ます〜

svgをアップロードして、名前を変更するだけで完了です◎

 

 


 

 

というとこでおむすびサイトの上部にあるロゴをもsvgにしてみました。

ブラウザで拡大表示してみると…

 

右の吹き出しは画像のままです!

ロゴは解像度が綺麗なままだ〜

 

という感じで、webデザインで綺麗に見せたい部分はぜひsvg書き出しを導入してみて下さい!


この「svg書き出し」日本ではあまり普及していないようですが、海外ではポピュラーになりつつあるようです。
とか書いといて、もう結構みんな導入してるんだったら…恥ずかしいな…


3年半ほど制作会社で働いたのち、おむすびを始めました。デザインやマーケティングなどを担当しております。人見知りですが、めちゃくちゃアウトドア派です。おもしろい、役に立つ、使い易い、そんな感じのサービスを山盛り作っていきたいと思っております。 おむすび!



更新日:2016-11-30

コメントを投稿する
投稿名
コメント内容
画像認証 CAPTCHA Image
[ 認証画像を変える ]

関連記事

自分で出来る!MEO(ローカルSEO)でやっておくべきこと6つ
アナリティクスで電話番号タップをコンバージョン計測する方法
CSSの背景画像でスライドショーを実装【jQuery】
たった3分で実装出来るJqueryで簡単スマホ用メニュー実装!
CSS Nite in OSAKA In-house SEO Meetup 参加予定
スマホ投稿にも使えるWYSIWYGエディッタsummernote

人気記事

CSSの背景画像でスライドショーを実装【jQuery】
分かりやすい地図をデザインする為に押さえておきたい4つのポイント
夏っぽい色のバナーデザイン
市立吹田サッカースタジアム観戦の感想
TBSラジオクラウドの保存方法
(direct) / (none) が急に増えた!



ブログ

もしかしてWebの書き出し、まだpng…!?

webの話




こんにちは18号です。

私もついこの前まではpng、jpgで書き出していました。

ある時、デザインサンプルを作るためにWebサイトからロゴをもらおうと
いつも通り、ドラッグ&ドロップでデスクトップにコピーしました。

今まではだいたい拡張子はpngかjpg、たまにgifでした。

しかしそのロゴの拡張子はsvgだったのです!

なぜ…?
調べてみるとsvg書き出し、なかなか良さそうなので、その話です。

▶そもそも.svgとは?

 

wikiからsvg拡張子の特徴を引用しておきます。

 

ベクタ形式であるため、拡縮自在である。その他に、XMLベースの為、ウェブブラウザで(画像として、という意味ではなく、HTMLのソースビュー等と同様に、という意味で)閲覧でき、テキストエディタ等で編集できる。また、HTMLとの親和性により、ハイパーリンクを埋め込んだり、JavaScript 等と連携させることもできる。

 

つまり…

jpg、pngなどはビットマップデータなので拡大すると表示が荒れますが、

svgはベクターデータなのでどんなに拡大しても表示が荒れない!と言うことです。

(イラストレーターデータも同じベクターデータです)

 

 

 

▶svg導入のメリット

 

どんなに拡大しても荒れない!

つまり、様々なスクリーンサイズへの対応が必要になってきている現在のwebデザインにピッタリなのです!

 

CSSで大きさを調整してもOK!

RetinaディスプレイでもOK!

 

ちなみにsvgは余計なパーツが取り除かれるので、ファイルが軽量らしいです。

 

良いことだらけでめちゃくちゃ優秀なSVG!

 

 

▶svg導入の注意点

 

まぁいくら優秀だと言っても、デザイン全てのパーツをsvgで書き出せ!と言うことではなくてですね…

実は写真や色数の多いデザインには向いていません。

 

単色のロゴやアイコン、アニメーションなどが良いとされています。

 

 

あと気になるのは…

svgでサイトにアップすると、そのデータをダウンロードして編集出来てしまうというところです。

ロゴやアイコンがダウンロード出来た所で…って感じもしますが

悪用されたくないデータにはお気を付け下さい。

 

 

▶svg書き出しの方法

 

①新規作成

イラストレーターで「ファイル」>「新規」から作成します。

単位をピクセルにし、作りたいサイズを入力して下さい。

 

 

②データを作成

アートボード内にデータを作成します。

文字データなどは全て「アウトライン化」して下さいね。

 

(ccの選択した時に◎がいっぱい出てくるの、いつも気持ちわる‥ってなります)

 

③svg保存

データが出来たら「ファイル」>「別名で保存」を押して下さい。

この時にファイル形式を「SVG(svg)」に選択して保存をします!

 

保存オプションはそのままOKで大丈夫です。

 

オプションについては色々ありますが、長くなるのでまたいつか書きます…

 

 

▶svgの導入方法

 

svgはタグを使って埋め込み出来ます〜

svgをアップロードして、名前を変更するだけで完了です◎

 

 


 

 

というとこでおむすびサイトの上部にあるロゴをもsvgにしてみました。

ブラウザで拡大表示してみると…

 

右の吹き出しは画像のままです!

ロゴは解像度が綺麗なままだ〜

 

という感じで、webデザインで綺麗に見せたい部分はぜひsvg書き出しを導入してみて下さい!


この「svg書き出し」日本ではあまり普及していないようですが、海外ではポピュラーになりつつあるようです。
とか書いといて、もう結構みんな導入してるんだったら…恥ずかしいな…


3年半ほど制作会社で働いたのち、おむすびを始めました。デザインやマーケティングなどを担当しております。人見知りですが、めちゃくちゃアウトドア派です。おもしろい、役に立つ、使い易い、そんな感じのサービスを山盛り作っていきたいと思っております。 おむすび!



更新日:2016-11-30
コメントを投稿する
投稿名
コメント
内容
画像認証 CAPTCHA Image

[ 認証画像を変える ]


関連記事

SEOはシンプルに考えるべき!絶対外せない重要な事3つ!
アドワーズの仕様変更でキーワードプランナーが悲しいことに…
「ブログを書こう」って言う業者おおすぎ
KPI・KSF・KGIをすっごく簡単に解説
作業時間3分!WEBクリップアイコンを実装だ!
SEO Meetupに参加してわかったSEOに大切な5つの事


人気記事

CSSの背景画像でスライドショーを実装【jQuery】
分かりやすい地図をデザインする為に押さえておきたい4つのポイント
夏っぽい色のバナーデザイン
市立吹田サッカースタジアム観戦の感想
TBSラジオクラウドの保存方法
(direct) / (none) が急に増えた!

ブログ