svg形式画像のレスポンシブ対応にビックリ!

公開日: パソコン関連

前回の投稿「svg形式の拡大・縮小って、すごい!」に続き、
また、svgとpngの違いを実験してみました。

Illustratorで作成し、pngで書き出した幅142pxの画像

6,199 バイト

heart_png

上のpngを、width=480px に拡大した画像

いやぁ〜ん、がたがた、ザラザラです。(≧∇≦)

画像をクリックすると別ウィンドウが開き、元々の画像サイズ142pxを確認できます。

heart_png

上の拡大したpng画像とほぼ同じ大きさのsvg画像

つ〜るつる♪
その上、ファイルサイズ1,266 バイトで、pngより小さいです。

そして、一番すごいのは・・・

画像をクリックすると別ウィンドウで、
widthを指定していない画像が開きます。

幅指定がないので、ブラウザに合わせたサイズで表示されます。
ブラウザのサイズを変化させてみてください。
ブラウザに合わせて、大きくなったり、小さくなったりします。

スマホやタブレットなら、縦・横向きを変えてみてください。

レスポンシブです。すごい *\(^o^)/*

heart_svg


幅指定をしていないレスポンシブなsvgは、背景に使うと、その威力を発揮しますね。

練習で作成したカフェのメニューページです。
見出しの背景にハートの画像を使いました。サイズ変更しなくても、1つの画像を使い回せます♪

関連記事

10161153_525dffa447c6a

ウェブデザイン技能検定のガイドブックが届きました

第一印象は・・・ とっても薄い。 きっと、 中身が濃いのでしょう(笑)。 ウェブデザ

記事を読む

play with camera

エプソンプリンタPX-7Vで、Macの場合、全面にオプティマイザが塗られてしまうという残念な現象について

エプソン7vで、写真のない部分にもオプティマイザが塗られてしまう現象は、解決方法がないとの回答がエプ

記事を読む

eye

求職者支援訓練まとめ Webサイト作成に必要なAdobe のソフト

Webデザイナー養成コースなので、Adobeのソフト、PhotoshopとIllustratorとD

記事を読む

eye

パソコンのモニタ上で見るだけの画像なら、解像度は無関係です

解像度は72でも、300でも、同じパソコンで見るなら同じに見えます 解像度72の画像

記事を読む

All in One SEO Pack

All in One SEO Packで、Facebookのリンクにブログのアイキャッチ画像がでるようになりました

そう! 出したかったのは、ヒレカツの写真です(笑)。 これまで、Facebookに自分のブログ

記事を読む

eye

アプリのインストールをしよう

使ってみたいiPadのアプリがいろいろあるのに、 どれもまだ試していません。 職業訓練をお休

記事を読む

スマホ画面

スマホ画面をパソコンで確認

さて、このサイトがスマホではどのように見えるのか? スマホを持っていないわたしは、困っていました。

記事を読む

イメージキャプチャ

iPadで撮った写真を、「イメージキャプチャー」でMac bookに取り込みました

Mac OS Xの標準アプリケーション「イメージキャプチャ」で取り込めると教えてもらったので、さっそ

記事を読む

公園ランチ

Dreamweaverって、やっぱり便利だね@求職者支援訓練48日目

昨日は練習、そして今日は1日中、本番のテスト。 あー、疲れた。 昼休みに、いつもの公園でラン

記事を読む

セキュリティコードを使用してiCloudキーチェーンをオンにしますか?

セキュリティーコードを使用して、iCloudキーチェーンをオンにしますか?

iCloudキーチェーンをオンにしますか? iPadを買ってまもなく、メッセージが出るようになりま

記事を読む

あみぐるみ
ブログ引っ越しました

新ブログ Happy Box ぜひ遊びにきてください(^o^)/

東武動物公園
あまりに大きくなったホワイトタイガーにびっくり

1月5日、もうすぐ1歳になるホワイタイガーの赤ちゃんに会いに行きました

西新井大師
2016年の初詣は西新井太師

1月3日、西新井大師へ初詣に行きました。 皆様、今年もよろしくお

大阪
年末は、在宅ワークセミナーを休んで大阪へ

しばらくブログの更新を休んでいました。 このブログを気にしていくれて

新しい文章力の教室
在宅ワークセミナー5日目、自分なりの切り口が大切だと感じました

今日は、提示されたテーマで、実際に文章を書く練習をしました。 ふ

  • お越しくださった皆様、ありがとうございます。 春は写真の季節です。たくさん撮りたいな。
PAGE TOP ↑