インラインSVGを使えば画像の色変更をCSSから楽にできる！ | HPcode（えいちぴーこーど）
インラインSVGはHTMLに直接タグで貼り付けられる SVGファイルの実態はパスなどの情報が記載されたXML形式の文字になります。手元にSVGファイルがあればテキストファイルで開いてみてください。 例えば以下のSVG画像は、実はこの記事に直接HTMLタグとして貼り付けていますが画像として表示されていることが分かるかと思います。 上の画像の文字としては実態は以下のとおりです。 <svg xmlns='https://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64' fill='#666'> <path d='M0 64 L32 32 L0 0 Z' /> </svg> こんな感じで、SVG画像の実態はパスの集合がテキスト情報で書かれたファイルでして、画像としての扱いではなくHTMLタグとして使うことができるようにな
svgスプライトの作り方から使い方まで - Qiita
なぜやるか cssスプライトと違って、 スタイルの変更がcssでできる ベクター画像なのでサイズ変更可能 retina対応のための画像を作ることが不要 色変更のために作り直すことが不要 svgブラウザ対応状況 svg - Can I use... Support tables for HTML5, CSS3, etc IE9-Edge12、Safari 5.1-6にはによる外部ファイルの参照をサポートしていません。 IEで読み込むためには、polyfillが必要です。詳細はIEに対応するで説明します。 polyfills（ポリフィル）というのは、数年前から言われている概念なので、 知っている人もいくらかいるのではないかと思いますが、 モダンブラウザで普通に出来て、レガシーブラウザで出来ない機能を、既存の技術で（あるいはそれらの組み合わせで）同等のものを提供する、という手法です。 (引用元:
SVGスプライトを使ってみたお話
SVGスプライトを使ってみたお話 こんにちは！ 本日はSVGスプライトのお話をしてみようかと思います。 SVGスプライトってなんぞ？ cssスプライトって昔の手法でありましたよね。一枚画像でbackground-positionを変更するだけにすれば、画像リクエスト数を減らせるってヤツですね。 それのsvgバージョンかなぁと思っていたのですが、全然違いました・・・ いや、全然違うことはないのかな・・・ svgスプライトを一言でまとめるなら svgファイルを一つにまとめて、使いたい時に呼び出そうぜ！ といったものかと。 svgをインラインで書くと、とんでもなくhtmlファイルが汚される気しませんか？ 無駄に行数取られて、何個も書いた時には、メッチャ見にくくなるのがストレスでした。 SVGスプライトを使う前の手法 例えばよくあるFacebookのfマークをインラインで書くと <svg xmln
SVGの画像サイズ指定でわかったこと - Qiita
せっかくHTML5なんで、SVGタグを使って画像をきれいに表示させることを検討してもらったのですが、 それを利用しようとしてわからなかったことが、サイズ指定でした。 imgタグだと、widthとheight属性を設定するかCSSで同様の指定をすればいいだけです。 さくっとできます。 しかし、SVGだとキャンパス制御になるためちょっとだけ面倒なようです。その面倒な面がわかったため取りまとめします。 svgタグは、HTML5で追加された新しいタグのようで「キャンパス」という表現が使われていることから、 ブラウザをキャンパス用に自由に自在に位置指定でオブジェクトを配置できる。 けれど、その自由さ故の分かりにくさがあります。 今回、サイトのロゴファイルをSVGファイル形式で保存した、logo.svgというファイルを作成した前提で説明です。 logo.svgで表示される大きさは幅450px高さ114
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
Ruby on RailsのAsset Pipelineを使って、Webfontを利用する - hilott@memo
2013-06-03 Ruby on RailsのAsset Pipelineを使って、Webfontを利用する Ruby on Rails Web Font 最近は、アイコンがWebFontとしても配布されるケースが増えてきました。アイコンの色を変えたり伸縮させたりすることが、CSSだけですぐできるので便利です。 今回Ruby on RailsでWebFontを使用するにあたり、どのようにfontを設置すればいいのか調べたのでまとめます。 現在使用しているRailsのバージョンは3.2.12です。 WebFontを設置する 今回はWebFontを下記のパスに設置します。fontsディレクトリを作成して、その中にフォントファイルを入れておきます。 {RailsRoot}/app/assets/fonts/myfont.eot {RailsRoot}/app/assets/fonts/myf
Retinaでもボケない「シンボルアイコン」を使いこなそう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも！デザイナの王です。 2012もいよいよ12月を迎え、果てして2013年は来るのかと、わくわくしている今日この頃です。 ここ最近、AppleのRetinaを皮切りに、超高精細ディスプレイが色んなメーカーから出ているニュースが目に付く。 有名所ではシャープのIGZO（約500ppi）、ジャパンディスプレイのLTPS（約650ppi）などがありますよね、iPhoneのRetinaをぶっちぎりで凌駕してしまうという！4K時代の到来を予感させる！（その前に地球が終わらなければいいのだが！） ということで、来るRetina全盛時代に備えるべく、どんなにモンスター級の高解像度のデバイスでも綺麗に表示する「シンボルフォント」を最近使い始めました。今回はそんな素敵なシンボルフォントの導入法を紹介したいと思います。 そもそも♥「シンボルフォント」♥って何？ 読んで字の如し、「図形のフォント」です。タイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
