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

WordPressの投稿でSVG画像を使えるようにしても、OGPやTwitter Cardsで対応してなかった件 – Rriver

WordPressの投稿でSVG画像を使えるようにしても、OGPやTwitter Cardsで対応してなかった件イメージオプティムでPNG画像を最適化すると、やたらと時間がかかるなぁと思ってTwitterでつぶやいたら「さっさとSVGに行けと言う啓示なのでは？笑」というコメントをいただきました（笑）。最近このブログに使う画像はSVGに最適なイラストが多いですし、ファイルサイズを小さくできて高解像度のディスプレーにも対応できるので確かにメリットがありそうです。そこで早速WordPressの投稿にSVG画像をアップしようと思ったんですが。。。メディアアップローダーでは以下のようなメッセージが出てきてアップさせてもらえませんでした。デフォルトではサポートされてないんですね。ちょっと驚きました。ということで、今回はWordPressの投稿でSVGを使うために必要なカスタマイズや関連する設定

idiotcomputer 2017/04/21

リンク

srcset属性を使ったSVGフォールバック・ハック

SVGをサポートする環境がほとんどになってきた。それでもなんとか8であったり、かんとか2.3であったりのことを考慮せざるをえないという状況はありうる。それにはonerror属性を使った対応が有力だが、srcset属性でSVGファイルを指定するだけというハックのことを知った。将来的に使えなくなるわけではないが、やりたいことと実装に食い違いが少なからずあるのでハックと言って良いだろう。 <img src="foo.png" srcset="foo.svg"> 表示したいSVGをsrcset属性で、フォールバックに使いたいPNGをsrc属性で指定するだけだ。これでsrcset属性をサポートしているブラウザーではSVGが、そうでないブラウザーではPNGが表示される。srcset属性のサポートに対して、より多くのブラウザーがSVGをサポートしていることから成立する。もちろん食い違いがあるのでSVGを

idiotcomputer 2015/10/04

SVG

リンク

Webサイトでよく使うアイテムが揃ってる！美しくデザインされたSVGの超軽量アイコン素材 -Evil Icons

idiotcomputer 2014/12/04

Material
SVG

リンク

SVG Fallbacks | CSS-Tricks

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There is a very clever technique by Alexey Ten on providing an image fallback for SVG going around the internet recently. It does just what you want in the classic no-SVG-support browsers IE 8- and Android 2.3. If we dig a little deeper we find a some pretty interesting stuff including a bit

idiotcomputer 2014/11/25

SVG

リンク

How to change color of SVG image using CSS (jQuery SVG image replacement)?

This is a self Q&A of a handy piece of code I came up with. Currently, there isn't an easy way to embed an SVG image and then have access to the SVG elements via CSS. There are various methods of using JS SVG frameworks, but they are overly complicated if all you are doing is making a simple icon with a rollover state. So here is what I came up with, which I think is by far the easiest way to use