SVGのオブジェクトごとにCSSで色を切り替える - わすれたあかんえ
デザインpsdを見ながらhtmlでコーディングするとき、たくさん画像を書き出しますよね。 たとえばpngのアイコンを作る場合、形が同じでも色が違えばpngファイルをたくさん書きださなければいけません。色だけ変えたものをひとつずつ、@2xサイズも用意してちまちまと……書き出して…… やってらんないっすよ！ せめて、形が同じなら使いまわしたい…… そう！SVGを使えば、同じオブジェクトを使ってCSSで色だけ変えたものを量産できるのです！ 「それだったらwebフォントでいいじゃん」と思われるかもしれませんが、webフォントはアイコンひとつにつき1色しか使えませんよね？SVGでやればアイコンひとつでも複数色使うことができます。 このSVGアイコンを使いまわして、 こんなかんじでカラフルなアイコンを量産しますよー！ ベクターでアイコンを作成 アイコン作るのがめんどくさい人はicomoonから適当なア
Illustratorからの画像/SVG/CSS書き出しのまとめ｜DTP Transit
［Web用に保存］は、Illustrator CS5までは［Webおよびデバイス用に保存］ SVGの書き出しはIllustrator CS5までは［Webおよびデバイス用に保存］内にあったが、Illustrator CS6では［別名で保存］のみに。［Web用に保存］に復活するのが望ましいと思います。
Icon System With SVG Sprites | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I’ve been a big proponent of icon fonts. Lots of sites really need a system for icons, and icon fonts offer a damn fine system. However, I think assuming you’re good with IE 9+, using inline SVG and the <use> element to reference an icon is a superior system. First let’s cover how it works.
アイコンフォントか？ SVG アイコンか？ | Accessible & Usable
公開日 : 2015年12月17日 (2018年1月20日 更新) カテゴリー : アクセシビリティ この記事は、「Web Accessibility Advent Calendar 2015」の17日目のエントリーです。 ウェブデザインにおいて、アイコンを配置することは多いと思います。特にここ数年はアイコンフォント (Font Awesome) を採用する案件が個人的に多かったこともあり、「アイコンフォントのアクセシビリティ向上」という記事を書いたりもしました。 ところがアイコンフォントにはもっと根本的なアクセシビリティ問題があるという指摘もあります。たとえば以下の記事が参考になるでしょう。 PUAアイコンフォントのアクセシビリティ - Unreviewed Seriously, Don’t Use Icon Fonts - Cloud Four Blog 総じて言うと、アイコンフォント
Advent Calendar 3日目:SVG画像を1キロバイトでも削るダイエット術！ - 聴く耳を持たない(片方しか)
これは GraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012 - Adventar への参加の記事です。 3日目の今日は私 id:rikuo がSVG画像ファイルの軽量化テクニックを取り上げてみます。 ちょっと長くなってしまったので、ご注意ください。 はじめに、SVGとは？ まず始めに、SVGとは何か？の簡単な説明です。 SVGとはScalable Vector Graphics（スケーラブルベクターグラフィックス）の略で、XMLを基盤に書かれた画像記述言語、またはベクター画像ファイルのことです。画像ファイルというと、JPEG、GIF、PNGまたBMPなどはよく知られていますね。それらの画像はピクセル（ドット）ごとに色を表現したもので、総じてラスター（ビットマップ）画像と呼ばれています。 対してSVGは座標や図形で扱うため、拡大・縮
SVGを制作できるアプリ,お絵描きソフトを徹底的に調べました！ 114個 - 聴く耳を持たない(片方しか)
私はTwitterでよくSVG関連情報をチェックしているのですが、 SVGってどう作ったらいいの？ みたいな投稿をしばしば見かけます。 SVGは地味な存在ですが近年は徐々に注目を浴び、関連ツールも増えてきたのでそうした人向けにSVG制作ツールって結構たくさんあるよ！と、まとめてみた次第です。 でも114個って多過ぎ！ ……って思うかもしれない、いや正直オレもそう思う。 なので最後に114個の中から管理人のお薦めツール10選っていうのもまとめておいたので、さっくり読みたい人はそれだけチェックすれば良いかと。 そもそもSVGとは、なに？ そもそもSVGってなに？という人もいるでしょう、それについては以前記事にまとめました。 SVGとはなにか？とSVGの学習に役立つサイトや書籍の紹介 SVGの説明と、SVGの学習に役立つサイトや参考になる書籍の紹介をしています。 今回とりあげるSVG関連ツールと
)
How to Zoom and Pan with SVG (Windows)
This topic shows you how to use Scalable Vector Graphics (SVG) to zoom and pan, and ends with an example of a complex organizational chart that can be zoomed and panned. Basic HTML and JavaScript knowledge are assumed, as well as access to a browser that can render inline SVG in HTML5, such as Windows Internet Explorer 9 and later. Introduction Creating an SVG Test Graphic Browser-Based SVG Zoom a
)
Adding SVG to a webpage (Windows)
This topic introduces common ways to render SVG in your webpage and assumes that you have basic HTML and JavaScript knowledge. Introduction Ways to Render SVG Inline HTML5 Inline XHTML Stand-Alone SVG Embedded Plug-in Summary Related topics Introduction If you are just learning about Scalable Vector Graphics (SVG) and you want to experiment with it, one of your first questions might be how to add
)
フィルター効果 - SVG - Windows Internet Explorer 10 Release Preview 開発者向けガイド
Internet Explorer 10 and Windows apps using JavaScript introduce support for Scalable Vector Graphics (SVG) filter effects. SVG filters enable you to manipulate graphics—similar to what you might do with an application such as Adobe Photoshop—directly in the browser. Consider the following SVG graphic. Using SVG filter elements, this simple graphic can easily be transformed into a much more visual
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Use Images, Icons, and Avatars Unit | Salesforce Trailhead
SVG MANIAX - CSS Nite After dark7
material-design-icons/sprites at master · google/material-design-icons · GitHub
gulpでSVGをWebフォント化する - YuG1224 blog
IcoMoon App