<div id="test" style="content: url(test.svg); width: 200px; height: 200px;"></div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
@cimmanon hmm, that's sweet, i want to test that. So in my.html or whatever I could have a bunch of html code to render... sounds awesome.
Unless SVGs are special, you should be able to treat them the same as you would an image: content: url(path/to/my.svg). That doesn't necessarily mean it would work with the jQuery UI tooltips library, though.
Why would you want to do this? If you have the svg code in the file already, then there is no need to put it in a pseudo-class. The whole point of pseudo-classes is to reduce DOM elements when you want to add a bit of content, but in your case if you just use your svg code normally it will be no worse (and probably cleaner) than putting it in a pseudo-class(which is also probably impossible). Unless of course if you want to put your svg code in a bunch of locations, in which case you should just keep your svg code in a separate file like an image.
Yes you can! Just tested this and it works great, this is awesome! It still doesn't work with html, but it does with svgs.
unfortunately, i don't believe this solution works with SVG sprites. for instance, content: url(mysprite.svg#my-icon) won't actually pull up your icon. i would love to be proven wrong, however :)