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);}
とても小さなカメラの画像になっていますが、サイズ変更はしていません。上に載せたsvg画像と同じものです。
Illustraor CCでは、SVGに書き出す際に「レスポンシブ」という項目にチェックを入れると、width属性とheight属性が設定されません。要素に合わせ、可変で表示されるということのようです。
そこで、今回の場合は、h1に合わせたサイズになったのでしょう♪
すごすぎます(笑)。
画像もお肌も、荒れにご注意。
関連記事
-
-
スマホ画面をパソコンで確認
さて、このサイトがスマホではどのように見えるのか? スマホを持っていないわたしは、困っていました。
-
-
セキュリティーコードを使用して、iCloudキーチェーンをオンにしますか?
iCloudキーチェーンをオンにしますか? iPadを買ってまもなく、メッセージが出るようになりま
-
-
Feedlyで、情報を逃さず素早くキャッチしよう
feedlyとは 求職者支援訓練のWebマーケティング講座で、evernoteとかpocketとか
-
-
エプソンプリンタPX-7Vで、Macの場合、全面にオプティマイザが塗られてしまうという残念な現象について
エプソン7vで、写真のない部分にもオプティマイザが塗られてしまう現象は、解決方法がないとの回答がエプ
-
-
アプリのインストールをしよう
使ってみたいiPadのアプリがいろいろあるのに、 どれもまだ試していません。 職業訓練をお休
-
-
Illustratorでグルッと回転したらお花ができたよ@求職者支援訓練36日目
桜のイメージで。 5枚の花びらにしたかったので、 ぐるっと1周、360度を5で割って、 72度
-
-
Google アナリティクスを設置
設置の仕方もよく分からず、解析の方法はさらに分からぬまま、とにかくやってみました。 http://
-
-
求職者支援訓練まとめ Webサイト作成に必要なAdobe のソフト
Webデザイナー養成コースなので、Adobeのソフト、PhotoshopとIllustratorとD
-
-
ウェブデザイン技能検定のガイドブックが届きました
第一印象は・・・ とっても薄い。 きっと、 中身が濃いのでしょう(笑)。 ウェブデザ
- PREV
- Studio9写真コンテストに応募中
- NEXT
- exFATでのフォーマットが一瞬で終わって拍子抜け