asamuzaK.jp : ♪Story in the SVG また繋がるフラグメント (c) AAA
使えば爽快！ SVG Spriteの改訂版。 SVGのsymbolとuseを使ってSVGスプライトを利用する方法を、再度、考えてみた。 SVG#fragmentを利用したSVGスプライトのテストケース Safari用のバグ対策を施したテストケース 今回のSVGのサンプルソース。 ターゲットになっていないuse要素はCSSで非表示にしてしまうことがコツといえばコツ。 あと、ルートのsvg要素には、widthもheightもつけず、viewBoxのみ。 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 128 128"> <style> use:not(:target) { display: none; } </style> <symbol id="re
SVGの利用
SVGの利用 今更感ではありますが当サイトのロゴをpng画像からSVGに変更しました。 SVGの利用に関しては松田さんの書いたIllustrator＆ベクターデータの教科書 を参考にさせていただきました。 SVGコードの取得 まず、Illustratorのアウトライン化したロゴからコピペでエディタにSVGのコードを貼り付けられます。 以下の様なXMLがクリップボードに格納されるのでコピペで終了です。 <!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSV
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を
asamuzaK.jp : 使えば爽快！ SVG Sprite
改訂版を出しましたので、そちらをご参照ください。 Safari8でSVG Fragment Identifiers（以下、svg#fragment）に対応してきた。 Firefox、Chrome、IEはすでに対応済みなので、これで主要ブラウザの足並みが揃った。 注：ところが、Safariの実装にはバグがあった…orz。 WebKit Bugzilla上では既に修正済みとなっているが、Safari9.xまでは依然としてバグが残っている。 これまで、PNGなどの画像を利用したCSSスプライトやアイコンフォントを使う気になれなかったが、svg#fragmentを使ったSVGスプライトならいけるな、と思い、折を見てテストを繰り返し、ようやくその方法が固まった。 そもそもCSSスプライトやアイコンフォントに対する個人的な不満は CSSスプライト 切り出す画像の領域を逐一CSSで指定しなければならない
Creating an SVG icon workflow - Luke Whitehouse's Portfolio
By using Gulp as a build tool and providing fallbacks for older browsers A tutorial on how you can leverage all the fantastic benefits of an SVG based icon system whilst still providing support for those pesky older browsers. Lets get one thing straight; SVGs are pretty awesome. You only have to take a quick trip around the Web to see the amazing possibilities it offers. One of these awesome featu
SVG Fallback with PNG Images - Call Me Nick
SVG Fallback with PNG Images In the following snippets, I take a look at implementing an SVG fallback with PNG images in four different ways, enabling you to achieve cross browser support for using SVG. If you’re not using SVG in your projects now, you should. SVG is awesome, and it’s a great way to minimise and simplify your image sprites, particularly when it comes to things like icons. If you h
A Complete Guide to SVG Fallbacks | CSS-Tricks
If you’re using SVG and are worried about unsupported environments, this is the guide for you. There is no single solution, since how you use SVG dictates the fallback. UGURUS by DigitalOcean for agency owners UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Here at CSS-Tricks, there’s a lot of information telling you how
SVG のフォールバックは結局 Modernizr に落ち着いた件
タイトルでほぼ言い切ってる感じなんですが...... SVG に対応していない環境 （IE8 以前とか、旧 Android の標準ブラウザとか） に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript （とりあえず jQuery） 書いて SVG 未対応ブラウザに対しては代替画像に差し替えるっていう手で落ち着きましたというお話。 SVG を使うにあたって、どの程度古いブラウザまで対応するかっていうのはありますが、今回対象にしている SVG は、ページ内で通常の画像 （普通の JPEG とか PNG） と同じように使われるものを想定していますので、いくら古いブラウザはサポート対象外とは言っても、文書内で大切な意味を持つ画像が表示されないのはまずいだろと。 あわせて対象となる SVG 内
Better SVG Fallback and Art Direction With The <picture> Element
Better SVG Fallback and Art Direction With The <picture> Element Published on 15 Feb, 2015 | Takes approximately 8 min to read Besides using an SVG as a background image in CSS, you can serve SVG foreground images in HTML using one of several embedding techniques, each of which has its advantages and use cases. Unless you’re in need of interactivity or external styling, is the standard way for
object 要素で配置した SVG ロゴをスクリーンリーダーに読ませる
object 要素で配置した SVG ロゴをスクリーンリーダーに読ませる 公開日: 2014年12月10日 タグ: memo, tips, html, accessibility, svg という訳で、Web Accessibility Advent Calender 2014 9日目の記事です。私も初日から公開される記事をずっと読んで勉強しておりますが、ここまで割と仕様とかガイドラインとか、あとは制作者としての気の持ちよう(?)とか、そういった話がずっと続いている気がしましたので、ここらでひとつ箸休めというか、実装に関する軽い話題をお送りしたいと思います。 さて、今ご覧のこのサイトですが、この数日ちょこちょことリニューアルを進めております。まだ制作途中で未完成な部分もありますが、概ねこんな感じにしようという部分はだいたい完了しましたので、見切り発車で公開しつつ直していこうかなという。まあ
HTMLパーサーを使ったインラインSVGのフォールバック方法
表題の件って以前にも当ブログで紹介していたんだけれど，それには一点問題があったのだけれど，ようやっと解決策を思いついたのでご紹介．って二年越しだよコレ！ インラインSVGを使う上で問題となること ようやくIE8環境の終焉が見えてきたところでSVG普及の目処が立ちつつある今日このごろですが，それでも要件上SVG非対応環境を無視できないことは未だにあるかと思います． すると問題となるのがSVG画像のフォールバックによる対処です．大抵はPNG画像を用いて代替とするのでしょうが，HTMLのインラインSVG機構を使っていた場合結構実現が難しかったりします． この問題への対処策は本ブログで紹介してきたとおりで，下記の記事で触れています． svgのフォールバック手法あれこれ http://defghi1977-onblog.blogspot.jp/2012/09/svg_27.html （こちらでも紹介
The invisible gradient technique: Cross-browser support for SVG (with image fallback) using CSS
The invisible gradient technique: Cross-browser support for SVG (with image fallback) using CSS Vector graphic formats such as SVG are great for high-density displays since their lines are clean at any zoom level. However, not all browser support SVG and there is not an obvious way to provide a fallback (using png, jpg or gif instead) for those browsers not supporting vector graphics. These days I
Protip: All browsers that support SVG background... - German for black
You’re about to read articles on the subject of building for the web by Ben Schwarz. Say you want SVG with PNG fallback for IE8? Do this: Extra credit: Heres a mixin for SASS to make it even gnarlyer. Update: Awesome people (@xavier_ho, @kylebarrow) from the internet have verified that the browser will only make a single HTTP request when using this technique. Update: Argh. Android 2.x browser wil
Test for Support of SVG as img | CSS-Tricks
Browser support for SVG isn’t quite as simple as yes or no. In addition to some quirks on how that support plays out, it depends on how that SVG is being used. One common way is right within an image tag, like <img src="image.svg" alt="description">. How can you detect if a browser supports SVG use in that way? It’s one thing to just know which browsers do. The only real danger zones are IE 8- and
SVGeezy - a JS plugin for SVG fallbacks
"The hood love to listen to jeezy and weezy and oh yeah SVGeezy…" A simple JavaScript plugin which detects SVG images on your website, and automatically "looks" for a standard image fallback for those older, less capable browsers. Those browsers need lovin’ too dawg. Download from GitHub or Share this on Twitter Resolution Independence SVG is a vector graphics format, meaning it’s perfectly scalab
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
SVG and <image> tag tricks
Alexey Ten, August 16, 2013 A few days ago Lea Verou shared a link to Jake Archibald's post Having fun with <image> where he once again found out that image and img are nearly the same, all browsers replace image with img while parsing HTML. A couple of months ago this property of image tag gave me the idea to use it for graceful degradation of SVG images in browsers which do not support SVG. The
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adding vector graphics to the web - Learn web development | MDN
SVGのフォールバック画像を用意したときのブラウザのHTTPアクセス状況
SVGをIE等のブラウザ対応を考慮して使う方法まとめ（SVGのフォールバック画像など）｜2.IDEA