外部 CSS ファイルにインラインで SVG を埋め込む方法
別に style タグやインラインスタイルに書いてもいいけど。 ということで、SVG ってあるじゃないですか。 いわゆるひとつの、Scalable Vector Graphics。 一般的に広く使われている JPEG や PNG のようなラスタイメージとは違ってベクタ形式なので、拡大縮小しても綺麗に表示できるっていうアレですね。 SVG は XML――すなわちテキストで記述されているので、ラスタイメージのように画像自体の縦横に比例してファイルサイズが際限なく大きくなってしまうようなことが起こり難く、ファイルサイズを比較的小さく保ち易いという利点もあります。 ※テキストだけに、http での転送時は gzip 圧縮も利きますし。 綺麗な上にファイルサイズも小さいときては、最近の Web ブラウザは基本的に対応していることもあり、そろそろ積極的に使っていこうと考えている方も多いのではないかと思
名前空間の速修講座 - SVG: スケーラブルベクターグラフィック | MDN
SVG: スケーラブルベクターグラフィック チュートリアル Introducing SVG from scratch 概要 始めましょう 配置 基本図形 パス 塗りつぶしとストローク SVG におけるグラデーション パターン テキスト 基本的な変形 クリッピングとマスク SVG におけるその他のコンテンツ フィルター効果 SVG フォント SVG の image 要素 SVG のツール SVG と CSS リファレンス 要素 <a><animate>animateMotionanimateTransformcircle<clipPath><cursor> 非推奨 defs<desc>ellipse<feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><fe
GulpでSVGスプライトを自動生成する | UNORTHODOX WORKBOOK | Blog
前回のエントリーでSVGスプライトを非同期で読み込む方法を紹介しましたが、今回はSVGスプライトをGulpで自動生成する方法を紹介します。 ここで生成するSVGスプライトは、HTMLにuseタグを使ってインラインで表示させるもので、CSSのbackgroundでは表示させることができませんのでご了承ください。 なお、インライン用のSVGスプライトの場合、（色情報等を削除するため）目視で確認することが難しくなってしまうので、SVGスプライトの生成と同時に一覧表示させるためのHTMLも自動で生成できるようにしています。 Githubリポジトリにすべてのコードをあげていますので、以下のリンクからダウンロードすることができます（構成やディレクトリ等、ここで記載しているものとは若干異なります）。 https://github.com/42EG4M1/svg-sprite-generator gulp
SVGのオブジェクトごとにCSSで色を切り替える - わすれたあかんえ
デザインpsdを見ながらhtmlでコーディングするとき、たくさん画像を書き出しますよね。 たとえばpngのアイコンを作る場合、形が同じでも色が違えばpngファイルをたくさん書きださなければいけません。色だけ変えたものをひとつずつ、@2xサイズも用意してちまちまと……書き出して…… やってらんないっすよ！ せめて、形が同じなら使いまわしたい…… そう！SVGを使えば、同じオブジェクトを使ってCSSで色だけ変えたものを量産できるのです！ 「それだったらwebフォントでいいじゃん」と思われるかもしれませんが、webフォントはアイコンひとつにつき1色しか使えませんよね？SVGでやればアイコンひとつでも複数色使うことができます。 このSVGアイコンを使いまわして、 こんなかんじでカラフルなアイコンを量産しますよー！ ベクターでアイコンを作成 アイコン作るのがめんどくさい人はicomoonから適当なア
WEBデザイナーのはじめての「SVG」 | 株式会社WEB企画
皆さん、師走をいかがお過ごしですか？ 今回は前々から試してみたかったSVGについての記事です。 基本予備知識0から色々触ってみて、SVGはどんなことができるのかとSVGの面白いなーと思った点等をまとめてみました！「これからSVG試してみようかな？」と思ってる方(特にWEBデザイナーさん)の参考になれば幸いです。 それではどうぞー！！ SVGとは その前にSVGについて簡単な説明しておきます。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータです。 その始まりは1998年と意外に古いのですが、ブラウザ対応が追いついておらず、長い間陽の目を見ることがなかったかわいそうなやつです。 SVGのいいとこ SVGがJPEG等の画像と比べていいなーと思
SVGをcss/jsで操作するときに知っておきたいこと - Qiita
はじめに ※SVG初心者向きの記事です SVGはスケーラブルでベクターなグラフィックスです。レスポンシブや高解像度ディスプレイに対応する時にはとても頼もしい存在です。htmlと同じようにcssやjsでの制御も可能なため、インタラクティブなコンテンツもお手の物です。 そんなSVGは表示だけであれば簡単ですが、cssやjsを利用する際には知っておきたい基本知識があります。 これ以上、私のように時間を浪費してしまう哀れな子鳥たちを増やさぬようメモしたいと思います。ｱｰﾒﾝ 目次 表示のさせかたに気をつけろ！ cssに気をつけろ！ fill: none;に気をつけろ！ viewBoxに気をつけろ！ jQueryに気をつけろ！ サーバーの設定に気をつけろ！ 表示のさせかたに気をつけろ！ SVGの表示方法は複数あります。 <img>のsrcでファイルを読み込む background-imageプロパテ
イラレで書きだしたSVGのサイズを可変にする | NeGiMeMo.net
bell賞味期限切れコンテンツ この記事は公開または最終更新から1298日くらい経過しています。 このメッセージが表示されている記事（特にプログラミング系）は情報が古くなっている可能性があるので注意して下さい。 さいきん少しずつ利用が増えてきてるSVGですが、イラレで書き出すとはじめに作ったサイズで固定されてしまい、objectタグのサイズをいくらいじっても、画像そのもののサイズは変わりません。（はみ出します） これをなんとかするには、ちょこっとSVGを加工してあげれば良いみたいです。 はじめに 自分もまだSVGについては調べ始めたばかりですので、この方法が本当に正しいかはわかりませんし、もっとスマートな方法もあるかもしれませんが、今自分に分かる範囲で実現できた方法としてメモしておきます。 やりかた まずは、SVGを作成します。イラレで適等に絵を書いて、SVGで保存しておけばOK。 それを
SVGアイコンを実用するために知っておきたい、リンク周りの記述方法
2014年6月30日 SVG 以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ ↑私が10年以上利用している会計ソフト！ SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性でURLを指定する必要があります。 <svg ... > <a xlink:href="http://google.com"> <path fill="#1E899D" ... > </a> </svg> See the Pen SVG
1つのSVGスプライト画像をCSS背景画像とインラインHTMLの両方で読み込む方法
この記事は「SVG Advent Calendar 2015 」の9日目の記事です。初めてAdvent Calendar的なものに参加させてもらいます。よろしくお願いします。 ※Advent Calendarの締め切りがあるので、検証途中ですが公開しちゃいます！ご了承ください。現段階では、旧ブラウザをサポートするためのフォールバックが最後まで検証できていないです。あとで追記します。 —–ここから本文—– そろそろロゴとかアイコンまわりの画像をSVGに移行したいと思い、Gulpを使って複数のSVGアイコンを1つにまとめるアイコンシステムを検証してこのブログでも紹介しました。でも、Gulpの設定に慣れていないと難しいし、CSSで背景画像として読み込めないというデメリットもありました。 そこで、今回はロゴやアイコンなどの複数の画像を、Sketchでスプライトにまとめて1つのSVG画像として保存し
<img>タグで埋め込んだSVGファイルの色変更をする JavaScript｜プログラムメモ
ベクターデータのSVGファイルはRetinaディスプレイがどんどん増えてくる今後代替フォーマットが登場しない限り主流になってくると思われます。 ただし、＜img＞タグでSVGファイルを読み込むと色変更がCSSでできません。 （＜SVG＞タグとソースを直接貼り付ける必要がある） そこで desvg.js を使用します。 ● deSVG http://benhowdle.im/deSVG/ imgタグで埋め込んだ外部SVGファイルの色変更が出来るようになります。 <script src="path/to/desvg.js"></script> <script> $(function(){ deSVG('.my_svg', true); }); </script> <img class="my_svg" src="xxxxx.svg" width="26"> .my_svg path{ colo
Monaural Sound
Monaural Sound to live my life by doing only what I like to do.
「Snap.svg」で、ぐにゃっとアニメーションさせてみた。 | MONSTER DIVE
ふと気づくと、やってみたいなぁと思う演出は大抵「ぐにゃっ」としていまして、「私だってぐにゃっとさせたい」と言ったら、先日、kentaro先生がSVGを制御できるJSライブラリ・Snap.svgについての勉強会を開いてくれました。 今回はそれを受けて、Snap.svgについて簡単にまとめてみたいと思います。 Snap.svgとは Snap.svg Snap.svgは、Adobeが提供しているオープンソースです。 Webブラウザ上でベクターデータが描画できるSVGの制御に特化したライブラリで、複雑なSVGタグの記述を簡略化して扱うことができる他、 パスの制御 フィルタ・マスク・クリッピング処理 アニメーション機能 等、様々な機能が提供されています。 用意されているメソッドもjQueryと似ていて、取り入れやすそうなところも良いですね。 今回使ってみたところ、少し重いかも？という印象はありました
インラインSVGの中の要素にリンクをつける方法 | スターフィールド株式会社
Flash全盛期などには、イラストの中の要素をクリックしてページを移動するようなサイトを時々見かけました。 Flashの代用の一つとしてHTML５で導入されたインラインSVGですが、 実はSVG内の要素にHTMLのように<a>でリンクをつけることができます。 SVG内の要素にリンクをつけることができると、 Illustratorなどで作ったベクター形式のイラストをそのまま使えるので、 Flashのようにイラストの中の要素をクリックして移動するということが、 HTMLだけで組むよりも簡単に行えるようになります。 ↓こちらはそちらを利用して作ってみたものです。 DEMO 方法はとてもシンプルです。 まずはIllustratorを使って、イラストを制作してください。 このとき、リンクさせる要素ごとにグループ化を行っておくと、リンクをつけやすくなります。 イラストができたら、SVG形式でファイルを
Gulpを使ったSVGスプライトのアイコンシステムとワークフローの作り方
SVGスプライトって、なんか複雑なイメージがありませんか？ 僕はそうでした。なんか、面倒くさそう。。。どこから始めて良いかわからない。。。といった感じでずっと手をつけられずにいました。 でも、今回やってみて思ったんですが、一度ワークフローを確立してしまえばアイコン管理がかなり便利になります。CSSスプライトの時よりも管理が楽になりますし、表示サイズや今後の高解像度対応を気にしなくて良くなるのも嬉しいですね。 SVGスプライトについての英語のリソースはあるのですが、説明が多く、とっつきにくいものも多い印象なので、ここではできるだけシンプルに必要なことだけをまとめてみたいと思います。 では、SVGスプライト・アイコンシステムのGulpを使ったワークフローの構築、始めましょう！ 目次 達成したいこと デモページ SVGスプライトの仕組み ブラウザサポート 用意するもの 導入ステップ 最後に 達成
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
svg-spriteで無駄の無いSVGスプライトを生成する - DeNA Design
gulp-svg-sprites