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オプション


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

関連記事

スマホ画面

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

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

記事を読む

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

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

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

記事を読む

fotor

気分転換!?

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

記事を読む

feedly

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

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

記事を読む

play with camera

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

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

記事を読む

eye

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

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

記事を読む

sakura

Illustratorでグルッと回転したらお花ができたよ@求職者支援訓練36日目

桜のイメージで。 5枚の花びらにしたかったので、 ぐるっと1周、360度を5で割って、 72度

記事を読む

play with camera

Google アナリティクスを設置

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

記事を読む

eye

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

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

記事を読む

10161153_525dffa447c6a

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

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

記事を読む

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

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

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

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

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

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

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

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

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

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

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