SVGに関するx-shinoharaのブックマーク (3)

  • IcoMoon App

    Easily mange your icons and integrate them in your projects. Browse free icons or import your own SVG icons to export as icon font, SVG, PNG, sprite and more.

  • 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スプライトの作り方から使い方まで - Qiita
  • 精度を保ってSVGを1バイトでも小さくする - Qiita

    あらまし SVGを利用するメリットのひとつは、CSSにインラインで埋め込めるほどのサイズの小ささです。 ただ、SVGは作り方を誤るといくらでもファイルサイズが大きくなるデータフォーマットでもあります。 CSSのインラインに埋め込むということは、同時にそのWebページで表示されることのないSVGもロードされてしまいがち。エンジニアとしては、ちゃんと最低限のサイズで埋め込みをすることで通信コストを抑え、CO2排出量削減に貢献したいですね! ちなみに、ここではSVGHTMLに埋め込めればいいや、ではなく、SVG-valid (XML-valid) なサイズ削減を目指しています。 チェック項目 軽量化する前に SVGはどう利用されるのか(どのくらいのサイズで描画されるのか、白黒でいいのか、色を塗り分けたいのか、JavaScriptで動的に制御したいのか、など)によって、パスをどう定義するべきかが

    精度を保ってSVGを1バイトでも小さくする - Qiita
  • 1