SVGの練習だよ

Adobe Illustrator CS5 でおほしさまを作って、線の塗をボカシたよ。それを、何も考えずに「Web及びデバイス用に保存」したよ。ただのSVG1.1だよ。

<p><img src="sample.svg" alt="おほしさま"></p>

Safariだと、ボカシが消えて白地に白なので、何も見えないよ

background-image : url(50-50_rgba808080-50.png) ;

一回、直に画像を表示させると、Safariでもボカシが表示されるよ

画像へのリンク　☜クリックしたら戻るボタンで戻ってきてね

背景画像に指定してみたよ

	width : 300px ;
	height : 300px ;
	background-image : url(sample.svg) ;
	background-repeat : no-repeat ;
	background-position : center center ;
	background-size : 100% auto ;
	border : 1px solid silver ;

この背景画像がおほしさま

おまけ : 線に塗をつけてもうひとつ後ろに星のボカシを置いてみた

Safariでは、SVG画像のボカシが消えてしまうよ、という話でした。