Well, technically it's the browser that supports SVG, ElkArte just uses SVG images in certain places instead of other formats.
I'm not sure I understand where exactly you want the images, but SVG are no different from any other image (provided the browser supports the svg format), so they can be used either in CSS or directly in HTML, so the answer (for me) is depends.
I would like as I said to put this svg+xml (animated svg) image beside the ElkArte credits in the footer, just could this workdont know ... for this file http://srufaculty.sru.edu/david.dailey/svg/SVGOpen2010/demoFE.svg probably Javascript as animation engine, the source code is in the DOM tree in the Elements panel, that should be copied in the CSS console for the footer image ...
anyway as I said it would be somehow from respect, not that this is something that I need, tho would like to play with it later if its easy process that could be applied elsewhere on the forum gui eg. as background image on the board categories, transparent post field etc.
https://css-tricks.com/animating-svg-css/
http://www.svgdreams.com/animate.php
think xml-svg extension soon would be regular thing in web design ... there are two ways to animate svg
SMIL or with Javascript (http://wiki.inkscape.org/wiki/index.php/SVG_Animation), but in this case I would like to copy/paste the engine in eventual image code in the footer
Hi Elk's if I use this code as backqround image
where should I add this code in the above one, or I need to make new background CSS folder in the theme, so I could get animated background, is this possible, can someone test this, for the explanation check the code link http://snapsvg.io/start/
var s = Snap("#svg");
var bigCircle = s.circle(150, 150, 100);
bigCircle.attr({
fill: "#bada55",
stroke: "#000",
strokeWidth: 5
});
var smallCircle = s.circle(100, 150, 70);
var discs = s.group(smallCircle, s.circle(200, 150, 70));
discs.attr({
fill: "#fff"
});
bigCircle.attr({
mask: discs
});
smallCircle.animate({r: 50}, 1000);
discs.select("circle:nth-child(2)").animate({r: 50}, 1000);
var p = s.path("M10-5-10,15M15,0,0,15M0-5-20,15").attr({
fill: "none",
stroke: "#bada55",
strokeWidth: 5
});
p = p.pattern(0, 0, 10, 10);
bigCircle.attr({
fill: p
});
discs.attr({
fill: Snap("#pattern")
});
discs.attr({fill: "r()#fff-#000"});
discs.attr({fill: "R(150, 150, 100)#fff-#000"});
You can add your css either to index.css or (preferred) create a custo.css file (searche the forum you'll find instructions) and put it there.