ReactでSVG Componentをカスタマイズ - Qiita
作ったもの とりあえず、作ったものをはじめに載せておきます。 下記リンクから見れると思います。 サンプル 問題 ReactでSVGを扱う方法は色々あると思うが、使い勝手が悪いなと思う点が多かった。 例えば、 jsxで使えるようにするためにSVGのプロパティ名を変更する必要がある react-svg-loaderなどを使いSVGファイルをComponentとして簡単に扱えるようにしても、カスタマイズが容易ではない など。 そして個人的に一番実現したかったのが、 デザイナーがIllustrator等でSVGのデータを作ることがあるが、そのデータ自体には修正を加えることなく、かつブラウザ上では何か動きをつけたい というもの。 例えば、以下のようなSVGファイルをIllustratorで作ってもらい、このSVGファイルを直接編集することなく、<image>にエフェクトを加えたり、<text>の内容
HTMLとCSSでSVGを使うためのメモ - Qiita
Qiita初投稿です。 2014年にフリーランスとなってからというもの、なかなか勉強の時間がとれず、おざなりになってしまっている技術がいくつかあります…… その中でもSVGの扱い方について、簡単にではありますが調べたのでメモしておきます。 昨日までの自分に教えるような気持ちで書きます！ まず、SVGは使えるのか？ ブラウザ対応状況 Can I use... Support tables for HTML5, CSS3, etc だいたい大丈夫です（2016/07/27現在） IEも9以降であれば表示はできるっぽいです。 メリット 拡大・縮小に強い（きれい） 軽い 使い方によってはCSSで装飾したり、アニメーションさせることも可能 アクセシビリティ上も良いことがある（まだあまり調べてない） デメリット 写真やイラスト等には向かない（どんな画像かによる。これまでGIFやPNGで書き出していたタ
Align SVG Icons to Text and Say Goodbye to Font Icons
The push for SVG icons over font icons has caught serious momentum in the web community. With an SVG icon system you can better meet accessibility standards, render higher quality visuals, and add/remove/modify icons in the library with ease. At Pivotal we’ve created an SVG icon system with React for use on our suite of products. This article is about my approach to styling the SVG icon system wit
How Could Google's New Logo Be Only 305 Bytes When Its Old Logo Was 14,000 Bytes?
The old logo uses a complicated serif font which can only be created using bezier curves. All together, it has 100 anchor points, resulting in a 6 KB (6,380 bytes) file. When compressed, the size comes down to 2 KB (2,145 bytes). A simplified version of the new logo, on the other hand, can be constructed almost entirely from circles and rectangles (with the exception of the lower-case g): The enti
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.jxck.io/notfound
