SVG example

dabblet.css

/* SVG example */
/* http://webdesign.tutsplus.com/articles/getting-started-with-scalable-vector-graphics-svg--webdesign-7515 */

#svg {
	background: rgba(0,0,0,0.2);
	height: 230px;
	width: 230px;
}
#line1 {
	stroke:rgb(0,0,0);
	stroke-width:4;
}
#circle1 {
	stroke: 		black; 
	stroke-width: 	4; 
	fill:			white;
}
#text1 {
	font-family: 	Helvetica,Arial,sans-serif;
	font-weight: 	bold;
	font-size:		34px; 
	fill :			#fff;
	text-shadow: 	0 0 9px black;
	transition: 	.8s text-shadow;
}

#svg:hover #text1 {
	fill: 			black;
	text-shadow: 	0 0 9px white;
}

dabblet.html

<svg id="svg">
  <line id="line1" x1="10" y1="10" x2="220" y2="220"/></line>
  <circle id="circle1" cx="110" cy="110" r="50" />
  <text id="text1" x="10" y="34">svg example</text>
</svg>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}