SVGのオブジェクトごとにCSSで色を切り替える - わすれたあかんえ
デザインpsdを見ながらhtmlでコーディングするとき、たくさん画像を書き出しますよね。 たとえばpngのアイコンを作る場合、形が同じでも色が違えばpngファイルをたくさん書きださなければいけません。色だけ変えたものをひとつずつ、@2xサイズも用意してちまちまと……書き出して…… やってらんないっすよ！ せめて、形が同じなら使いまわしたい…… そう！SVGを使えば、同じオブジェクトを使ってCSSで色だけ変えたものを量産できるのです！ 「それだったらwebフォントでいいじゃん」と思われるかもしれませんが、webフォントはアイコンひとつにつき1色しか使えませんよね？SVGでやればアイコンひとつでも複数色使うことができます。 このSVGアイコンを使いまわして、 こんなかんじでカラフルなアイコンを量産しますよー！ ベクターでアイコンを作成 アイコン作るのがめんどくさい人はicomoonから適当なア
SVGの基本＆活用法。SVGのメリットと事例を基礎から学ぶ。
パソナテックさん主催コミュニティ「SHIBUYA☆LABU」のイベントの際のスライドです。 https://shibuya-labu-pt.doorkeeper.jp/events/30744 現在Web制作の現場において、コーダーとしてお仕事されているみなさん、今後のご自身のキャリアマップは描けていますでしょうか？ 専門的なフロント知識を活かして技術を極めていくのか、それともディレクターとしてキャリアを積んでいくのか悩まれている方も多いかと思います。 もしディレクターへのキャリアを考えているそんなあなたに！ ご自身の制作経験や強みを活かして、作れるディレクターとして活躍できるディレクション術をお伝えいたします！
イラストレータからコピペするだけでSVGが使えることを知りました。 - megane9988のブログ
先日行われました、CPI x CSS Nite x 優クリエイト「After Dark」（17）「webクリエイターのための情報交換所 2014年振り返りスペシャル」（2014年12月18日開催） において、LTで デザイン事務所 TIMINGの北村さんが紹介していた。SVGファイルをイラレから、コピペでWebに利用できるという内容が衝撃的なぐらい簡単で使いやすそうだったので紹介します。該当のセッションのスライドは下記です。 そうすると、下記のようなズラズラーとっとした文字列が張り付きます <!– Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In –> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
