[B! SVG] nakagawのブックマーク

インラインSVGがボケる場合への対処

wittern by @DEFGHI1977. インラインSVGがボケる原理スタンドアロンのSVGでは描画結果をくっきりとさせるため, strokeプロパティに依る線の描画に細工を施す場合がある. 例を示す. 素朴な例 (1)素朴な例 0.5pxずらす例 (2)0.5pxずらす例 2px幅とする例 (3)2px幅とする例上記の格子をスクリーンデバイスにおける1画素とし, 黄線をストローク(線)を引く基準ラインとする. (1)では幅1pxの黒色のストロークを引こうとしている. この場合, SVGの仕様により描画内容が画素の境界を跨いでしまうが, 一般的なwebブラウザではこのようなケースに於いてグラフィックの内容を近似しようとする．そのため出力結果に本来の黒色よりも薄いグレーの部分が発生してしまうのだが，これがSVGがボケる原因である．この問題を解決するには(2)のように基準

nakagaw 2016/11/22

SVG

リンク

How to work with SVG icons

There are many ways to use SVG icons in HTML and CSS, and I haven’t tried them all. This is how we do it in our small front-end team at Kaliop. It works well for our needs, which include: Content and communication websites, often based on big CMSes, rather than full-JS web apps. Icons which are often simple, single-color icons (each potentially used in several different colors depending on context

nakagaw 2016/04/07

SVG

リンク

Advent Calendar 3日目:SVG画像を1キロバイトでも削るダイエット術！ - 聴く耳を持たない(片方しか)

これは GraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012 - Adventar への参加の記事です。 3日目の今日は私 id:rikuo がSVG画像ファイルの軽量化テクニックを取り上げてみます。ちょっと長くなってしまったので、ご注意ください。はじめに、SVGとは？まず始めに、SVGとは何か？の簡単な説明です。 SVGとはScala ble Vector Graphics（スケーラブルベクターグラフィックス）の略で、XMLを基盤に書かれた画像記述言語、またはベクター画像ファイルのことです。画像ファイルというと、JPEG、GIF、PNGまたBMPなどはよく知られていますね。それらの画像はピクセル（ドット）ごとに色を表現したもので、総じてラスター（ビットマップ）画像と呼ばれています。対してSVGは座標や図形で扱うため、拡大・縮

nakagaw 2016/02/01

SVG

リンク

SVG画像を書き出す際に重要な設定「小数点以下の桁数」とはなにか？ - 聴く耳を持たない(片方しか)

これはSVG Advent Calendar 2014の参加記事です。昨日はmemocarilogのSaori Miyazakiさんによる「filter 要素の基本的な使い方と filter 要素をつかったモノクロからカラーへ変化するマウスオーバー効果を作る方法」でした。第3日目は私 id:rikuo が担当します。（※追記）第4日目はイロドルハナ(@shino212)さんの「はじめてSVGでアニメーションを作った時の話」です。ちなみにまだ空いている枠はあるので、興味のある方は是非ご参加ください。はじめにSVGはXMLをベースにしているためテキストエディタでも簡単に作れるとは言え、実際の制作は何らかのオーサリングツールを利用することがほとんどでしょう。中でもAdobe Illustratorはベクター系ソフトウェアの代表的な存在で広く普及しています。このIllustratorか

nakagaw 2016/02/01

SVG

リンク

Animated SVG vs GIF [CAGEMATCH]

Animated SVG vs GIF [CAGEMATCH] Published on 24 Nov, 2015 | Takes approximately 19 min to read SVG can do much more than display static images. Its animation capabilities are one of its most powerful features, giving it a distinctive advantage over all other image formats. They are one of many reasons that make SVG images better than raster images, including GIFs. But this, of course, only appl

nakagaw 2015/11/27

画像の比較と、テーブルの比較が左右入れ替わるのが気になって内容はいってこない

SVG
GIF

リンク

数多くの無料アイコンから必要なものだけをセットにして、軽量化されたWebフォントやSVGを作成できるサービスのまとめ

セットになったアイコンはデザインが統一されており、それはそれで便利ですが、全部のアイコンを使うことはほとんどないと思います。自分が必要なアイコンだけをセットにし、軽量化されたセットにして、WebフォントやSVGとして利用できるオンラインサービスを紹介します。用意されたアイコンからセットを作ってもよし、自分のアイコンを加えてセットにすることもできます。 flat icon フォーマット：font(woff, eot, ttf, svg), png, svg, eps, psd 462種類のパック、55,000個のアイコンから使用するアイコンだけを選択し、セットにすることができます。チェックしたアイコンはクッキーで保存されているので、ログインしないでも利用できます。

nakagaw 2015/05/20

SVG

リンク

PNG vs SVG for sprites

About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

nakagaw 2015/05/19

CSS
SVG

リンク

SVGアイコンを実用するために知っておきたい、リンク周りの記述方法

2014年6月30日 SVG 以前書いた「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」という記事でSVGの基本や効率よく使用する方法を紹介しましたが、実際にWebサイト内で使うにはもう少し具体例が必要だなーと思ったのでリンク関連を中心に補足します。基本的な記述方法を覚えて実用化していきましょう！ ↑私が10年以上利用している会計ソフト！ SVGにリンクを貼る SVGにリンクを貼りたい場合、単純に a タグで svg を囲んでもうまくリンクを貼ることはできません。svg タグの中のオブジェクトを a タグで囲み、xlink:href 属性でURLを指定する必要があります。 <svg ... > <a xlink:href="http://google.com"> <path fill="#1E899D" ... > </a> </svg> See the Pen SVG

nakagaw 2015/04/19

SVG

リンク

HTML5 と SVG で考える、これからの画像アクセシビリティ

This document discusses Yarn and its advantages over npm. It notes that Yarn uses yarn.lock files instead of npm-shrinkwrap.json files to lock down dependency versions. Yarn is also described as being faster, able to work offline by caching dependencies, and potentially more secure than npm with features like flat mode and module folders. The document suggests Yarn may handle dependencies and devD