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


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

関連記事

play with camera

Google アナリティクスを設置

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

記事を読む

eye

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

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

記事を読む

feedly

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

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

記事を読む

play with camera

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

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

記事を読む

eye

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

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

記事を読む

公園ランチ

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

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

記事を読む

play with camera

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

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

記事を読む

eye

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

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

記事を読む

All in One SEO Pack

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

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

記事を読む

sakura

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

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

記事を読む

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

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

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

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

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

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

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

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

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

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

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