jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

SVG画像非対応のブラウザに対してPNG画像への差し替え

一覧へ戻る
注意
これらの記事は2016年当時の物で結構古いです。モダンブラウザでは不要な記述やJavaScriptでなくともCSSで実現できる機能もあります。 当時の記録として残してありますがあまり参考になるものではありません。
概要
SVG画像利用可能かを判定して、利用不可であれば<img>タグsrc属性の拡張子.svg及び.svgzを.pngに置き換えます。
及び、<html>タグにclass属性でno-svgを追加します。
使用方法1
<img src="logo.svg">
<img src="logo.svgz">
の様にHTMLに記述して、logo.svg(logo.svgz)と同ディレクトリにlogo.pngも配置しておきます。
使用方法2
.logo {
　　background-image: url(logo.svg);
}
.no-svg .logo {
　　background-image: url(logo.png);
}
の様にCSSに記述します。
備考
確かIE8にも対応してほしいという要望により、色々手を加えました。IE8ではaddEventListener()は使用できないため、addEvt()でクロスブラウザ対策しています。
クライアントのパソコンが非常に低速だったため、同じ処理を時間差で何度か処理させています。
元ネタに大きく(半分以上)手を加えたものになります。元ネタの所在は紛失してしまいました。 

/**
 * SVG利用可能を判定して、利用不可であれば.svgzまたは.svgを.pngに書き換える
 * htmlタグに class="no-svg" 追加
 *
 * <img src="image/logo.svgz">
 * <img src="image/logo.svg">
 *
 * SVG使用可能であれば何もしない
 *
 * SVG使用不可であれば 拡張子を.pngに差し替え。<img src="image/logo.png">
 * SVG使用不可であれば htmlタグに class="no-svg" 追加。 <html class="no-svg">
 *
 * @author ao-system
 */
(function(window,document){
	init();

	function addEvt(elm, tpe, func) {
		if (elm.addEventListener) {
			return elm.addEventListener(tpe, func, false);
		} else if (elm.attachEvent) {
			return elm.attachEvent('on' + tpe, func);
		} else {
			return elm['on' + tpe] = func;
		}
	}
	function init() {
		var svgAvailable = (window.SVGAngle) ? true : false;
		if (svgAvailable) {
			//何もしない
		} else {
			addNoSvgClass();
			render();
			addEvt(document,'DOMContentLoaded',function(){render();});	//低速パソコン対策
			addEvt(window,'load',function(){render();});	//低速パソコン対策
		}
	}
	function render() {
		setTimeout(function(){
			replaceExtension();
		},1000);	//低速パソコン対策
		setTimeout(function(){
			replaceExtension();	//低速パソコン対策
		},3000);
	}
	function addNoSvgClass() {
		var htmls = document.getElementsByTagName('html');
		if (htmls.item(0).getAttribute('class')) {
			var htmlClass = htmls.item(0).getAttribute('class');
			htmls.item(0).setAttribute('class',htmlClass + ' no-svg');
		} else {
			htmls.item(0).setAttribute('class','no-svg');
		}
	}
	function replaceExtension() {
		var imgs = document.getElementsByTagName('img');
		for (var i = 0; i < imgs.length; i++) {
			(function(img){
				var src = img.getAttribute('src');
				var newSrc = '';
				if (isIncludeString(src,'.svgz')) {
					newSrc = src.replace('.svgz','.png');
				} else if (isIncludeString(src,'.svg')) {
					newSrc = src.replace('.svg','.png');
				}
				if (newSrc != '') {
					var tmpImg = new Image();
					tmpImg.onload = function(){
						var w = tmpImg.width;
						var h = tmpImg.height;
						img.setAttribute('src',newSrc);
						img.style.width = w + 'px';
						img.style.height = h + 'px';
					}
					tmpImg.src = newSrc;
				}
			})(imgs[i]);
		}
	}

/**
 * 文字列中に特定の文字列を含むか否か
 *
 * @param string src 調べられる文字列
 * @param string needle この文字列を含むか否か
 * @return boolean
 */
	function isIncludeString(src,needle) {
		if (src == null) {
			return false;
		}
		var dst = src.replace(needle,'');
		if (dst.length != src.length) {
			return true;
		}
		return false;
	}
})(window,document);