svg形式の拡大・縮小って、すごい!

公開日: パソコン関連

SVGを試してみました

ウェブに載せる画像形式と言えば、これまでは、JPG GIF PNG でしたが、Retinaディスプレイに最適なベクター形式のSVG というものが、最近、使われるようになっているそうです。

Adobeのコンプリートプランに入り、Illustratorが使えるようになったので、試してみました。

サーバーに上げた画像は1つです。
svgではwidht属性を変えても、画像が荒れることはありません。

よく分かりませんが、なんかすごいです(笑)。

width=”100″

<img src=”http://74photo.com/*****/*****/a.svg”  width=”100″ />

width=”200″

<img src=”http://74photo.com/*****/*****/a.svg”  width=”200″ />

width=”300″

<img src=”http://74photo.com/*****/*****/a.svg”  width=”300″ />

width=”400″

<img src=”http://74photo.com/*****/*****/a.svg”  width=”400″ />

width=”500″

<img src=”http://74photo.com/*****/*****/a.svg”  width=”500″ />

見出しのスタイルにsvgを使ってみました

見出し「Studio9 コンテスト これまでに応募した作品」のスタイルに、上と同じsvg形式のカメラの画像を使ってみました。
http://74photo.com/studio9contest_kako/studio9contest_kako.html

h1 {background-image: url(http://74photo.com/*****/*****/a.svg);}

always with camera

とても小さなカメラの画像になっていますが、サイズ変更はしていません。上に載せたsvg画像と同じものです。

Illustraor CCでは、SVGに書き出す際に「レスポンシブ」という項目にチェックを入れると、width属性とheight属性が設定されません。要素に合わせ、可変で表示されるということのようです。

そこで、今回の場合は、h1に合わせたサイズになったのでしょう♪

すごすぎます(笑)。

【参考】
Illustratorのsvgオプション
Illustratorのsvgオプション


画像もお肌も、荒れにご注意。

関連記事

fotor

気分転換!?

Fotorというフリーソフトで、遊んでみました。  

記事を読む

play with camera

Yahoo天気予報のブログパーツをつけてみました

今日、職場でブログパーツが話題になったので、試してみました。 サイドバーの一番下に、天気予報のブロ

記事を読む

イメージキャプチャ

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

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

記事を読む

feedly

Feedlyで、情報を逃さず素早くキャッチしよう

feedlyとは 求職者支援訓練のWebマーケティング講座で、evernoteとかpocketとか

記事を読む

10161153_525dffa447c6a

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

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

記事を読む

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

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

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

記事を読む

play with camera

Google アナリティクスを設置

設置の仕方もよく分からず、解析の方法はさらに分からぬまま、とにかくやってみました。 http://

記事を読む

公園ランチ

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

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

記事を読む

eye

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

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

記事を読む

eye

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

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

記事を読む

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

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

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

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

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

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

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

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

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

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

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