Develop Reference

How can I access SVG elements in html (with CSS preferably) without pasting the code in directly?

I was trying to work through this tutorial as a practice for a bigger project I'm working on.
My actual SVG is really big, so I would rather not just copy paste the whole giant code directly into HTML.
But here's the practice one I made (i'm also not sure how to clean SVGs made in Inkscape, but I deleted some of the stuff that didn't seem necessary.
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
id="svg1"
version="1.1"
viewBox="49.595489 30.040314 84.135223 84.305336"
height="84.305336mm"
width="84.135223mm">
<path class="path5076"
id="path5076"
d="m 70.303571,78.340773 c -4.032971,0.006 -8.033187,1.698025 -10.862132,4.572387 -2.828946,2.874362 -4.455685,6.891674 -4.445904,10.924637 0.0095,3.927963 1.572604,7.841853 4.315065,10.653953 2.74246,2.8121 6.641232,4.47709 10.569138,4.45364 4.633366,-0.0277 9.108311,-2.43049 12.384652,-5.70683 3.574526,-3.57453 6.411017,-6.242046 9.347584,-9.825986 0,0 7.17598,-6.918764 10.743336,-10.51178 3.56737,-3.593016 7.41006,-7.169152 11.08478,-10.843875 3.34645,-3.346446 6.32139,-6.581106 9.51049,-9.812482 3.3753,-3.420038 5.15813,-7.12199 5.18334,-11.661986 0.0216,-3.889398 -1.60848,-8.155743 -4.38434,-10.880165 -2.77587,-2.724421 -6.6563,-4.279784 -10.54572,-4.261811 -3.8759,0.01791 -7.72562,1.595418 -10.48769,4.314587 -2.762056,2.71917 -5.002206,6.149863 -4.776456,11.428746 -0.0484,4.514439 2.874106,9.098792 5.148056,11.372746 3.19237,3.192372 6.9848,6.227335 10.17717,9.419709 3.20164,3.201638 6.0452,5.990107 9.58187,9.526778 1.80732,1.807321 3.93629,5.149881 4.68721,7.593023 0.75092,2.443141 1.01197,5.054051 0.5999,7.576553 -0.55185,3.378163 -2.33545,6.072793 -4.93781,8.296363 -2.60235,2.22358 -5.80201,3.69214 -9.22483,3.7206 -4.69281,0.039 -9.04011,-1.51725 -12.0905,-4.81311 -3.187696,-3.44421 -7.211206,-7.037566 -10.268806,-10.463896 -3.057595,-3.42633 -6.28628,-6.607684 -9.408672,-9.762441 -3.174881,-3.207791 -7.386446,-5.316042 -11.899731,-5.30936 z"
style="fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</svg>
In the tutorial it says:
Let's target the path with CSS (assuming we're using inline SVG here,
or via an 'object')
which is great because just uploading svg without copy-pasting is exactly what I wanted. But I'm not sure how to proceed now. From what I could find, the only way to access the inside parts of SVG is through javascript, which I've never done before as I don't know javascript.
So I have this
<object id="svg1" data="path.svg" type="image/svg+xml"></object>
Now I'm trying to figure out how to access the path inside the SVG.
I tried putting in this code that I found, but it didn't do anything.
<script>
window.onload=function() {
var a = document.getElementById("svg1");
var svgDoc = a.contentDocument;
var svgItem = svgDoc.getElementById("path5076");
svgItem.setAttribute("fill", "lime");
};
</script>
I then found someone saying that I had to let the SVG load first, so I added
<script>
var mySVG = document.getElementById("svg1");
var svgDoc;
mySVG.addEventListener("load",function() {
svgDoc = mySVG.contentDocument;
alert("SVG contentDocument Loaded!");
}, false);
</script>
but that also didn't seem to work.
This is my first stab at JS, so any help is appreciated.
But if you know how this can be done with CSS PLEASE let me know, I'm much more comfortable with it (as comfortable as I can be after two weeks of learning it, as opposed to 0 weeks with JS)
Edited as per suggestion, but I think I'm still doing it wrong.
Also, I only left "fill:none;fill-opacity:1;stroke:#febc00;stroke-width:10.80000019" in style and removed everything else. Does that mean I can still assign attributes like stroke-dasharray or do they have to be predefined inside style first?
still hoping someone has some other input

The style precedence, from lowest to highest, is
attributes
CSS style sheets
inline styles
Your SVG uses inline styles (style="fill:none;fill-opacity:1;...).
So your code is correct but no matter what you do with the "fill" attribute, it is overridden by the inline style, so svgItem.setAttribute("fill", "lime"); is useless.
You need to alter the inline style somehow.
The easiest solution is to change the inline style by calling:
svgItem.setAttribute("style", svgItem.getAttribute("style").replace("fill:none;","fill:lime;"))
but you can also remove the inline style completely and work with the attributes/external CSS instead.
another option is to convert inline style to attributes:
<script type="text/javascript">
window.onload=function() {
var a = document.getElementById("svg1");
var svgDoc = a.contentDocument;
var svgItem = svgDoc.getElementById("path5076");
// replace inline style with attributes
var styleText = svgItem.getAttribute("style");
svgItem.removeAttribute("style");
for (let pair of styleText.split(';')) {
let [key, value] = pair.split(':');
svgItem.setAttribute(key,value);
}
// now you are ready to work with the attributes
svgItem.setAttribute("fill", "lime");
};
</script>

How can I set an Attribute with case-sensitive name in a javascript generated element

I create a svg element in javascript and I need to set an attribute which is case sensitive: viewBox.
The element is created like this: var svgElem = document.createElement('svg');
Problem is when it set that attribute via svgElem.setAttribute("viewBox", "0,0,100,100") and append to the DOM, the resulting element shows like this:
<svg viewbox="0,0,100,100"></svg>
This doesn't work because the viewBox is case sensitive, it will not take any effect if the letter B is lowercase.
IE allows an IFlag parameter just for cases like these, however my target audience is restricted to FireFox and Chrome users, which do not have IFlag for setAttribute as far as I could find.
Is there a way of making this work without using innerHTML and no-library javascript?
EDIT: I have also tried using dot notation with no success svg.viewBox = "0,0,100,100"

You need to create an actual svg element. When you do:
var svg = document.createElement('svg');
what you are actually getting is an HTML element named svg, not an SVG element. The key here is that SVG is not actually an HTML element at all, it is a foreign document root. To create an SVG element properly, you need to do
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
Specifically, this creates an XML element, rather than an HTML element. In the basic browser case,
document.createElement('div')
is the same as
document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
This makes a big difference, because in HTML, attribute names are not case-sensitive, whereas in XML, they are. Also, if you were to append that SVG to the DOM, it would behave like a div since it is an unknown HTML element, rather than a real SVG element. An HTML parser is smart enough to create a foreign root node instead of an unknown HTML element, but your code is programmatic, so it can't do it automatically.

It works fine for me in Chrome and Firefox.
var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, "svg");
svg.setAttribute("width", "400");
svg.setAttribute("height", "400");
var circle = document.createElementNS(svgns, "circle");
circle.setAttribute("cx", "300");
circle.setAttribute("cy", "300");
circle.setAttribute("r", "100");
svg.appendChild(circle);
document.getElementById("container").appendChild(svg);
// Now change the viewBox
svg.setAttribute("viewBox", "200 200 200 200");
<div id="container">
</div>
(Note: updated to create the SVG from scratch as per OPs request)

For HTMLElement, just change setAttribute("attrName", "value") to setAttributeNS(null,"attrName", "value"), resolved my problem.
see this post :
'setAttributeNS()' doesn't convert the name to lower case.

You should create the value using createAttribute, see
Setting attribute value of an element in camelCase using a directive
var div1 = document.createElementNS("http://blabla/svg", "view");
var attr1 = document.createAttribute("viewBox");
attr1.value = "200 200 200 200";
div1.setAttributeNode(attr1);

How do I create a style sheet for an SVG element?

I tried to add a style sheet to an SVG element, like this:
var theSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var theStyle = document.createElementNS("http://www.w3.org/2000/svg", "style");
theSvg.appendChild(theStyle);
console.log("theStyle.sheet=", theStyle.sheet); // undefined, try adding svg to DOM
document.body.appendChild(theSvg);
console.log("theStyle.sheet=", theStyle.sheet); // still undefined
What am I supposed to do to get to the sheet node there in theStyle?
There is a fiddle here: http://jsfiddle.net/XaV7D/2/

As #RobertLongson points out in the comments, the problem is that the SVG specs define a svg:style element interface, but it doesn't implement the CSS OM interfaces associated with a stylesheet's owner element.
Here are a couple work-around approaches (while waiting for the SVG 2 specs to implement the latest CSS OM specs):
Use an (X)HTML style element. If your SVG code is inline within an (X)HTML document, then the HTML <style> element can be used to style the SVG. Just make sure that you either create the style element in the default namespace or explicitly create it in the XHTML namespace, so that you get an instance of HTMLStyleElement, not SVGStyleElement.
Add the newly-created HTMLStyleElement to the head of your document, and the CSS stylesheet object will be created for you:
var hs = document.createElement("style");
hs.type = "text/css";
document.head.insertBefore(hs, null);
hs.sheet.insertRule("circle{fill:red;}", 0);
This answer goes into more detail about dynamically creating stylesheets in HTML, including a working example.
(Theoretically) Use an xml-stylesheet processing instruction. If your SVG code is in a stand-alone SVG file, then you can use XML processing instructions to link external stylesheets. The processing instruction node provides access to the stylesheet object.
However, unlike a <style> element, which can be empty, the processing instruction node must link to a file, or the browser will never initialize the stylesheet object. I tried to get around that by defining the external file as an empty data URI of the correct MIME type. It usually, but not consistently, works in FF/Chrome when run from the console, but not from an embedded script. In Chrome, the sheet property is always null, the same way Chrome treats cross-domain stylesheets; Firefox gives an explicit security error. I assume it won't work at all in IE, which doesn't like non-image data URI files.
var xs = document.createProcessingInstruction(
"xml-stylesheet",
"href='data:text/css,' type='text/css'");
document.insertBefore(xs, document.rootElement);
xs.sheet.insertRule("circle{fill:blue;}", 0);
You weren't clear about why you were trying to dynamically create a style sheet. If the intent is to actually link to a valid stylesheet on a same-domain server, then the security problems wouldn't be an issue; the problem is that data URIs are treated as cross-origin.
Use a svg:style element, but then access the stylesheet object using document.styleSheets (from the comments to the other answer, it seems this is what you're already doing). Cycle through all the stylesheets until you find the one that has your style element as the owner node:
var ss = document.createElementNS("http://www.w3.org/2000/svg", "style");
svgElement.appendChild(ss);
var sheets = document.styleSheets,
sheet;
for(var i=0, length=sheets.length; i<length; i++){
sheet=sheets.item(i);
if (sheet.ownerNode == ss) break;
}
sheet.insertRule("circle{fill:green;}", 0);
This should work regardless of whether or not your SVG is in a stand-alone file.

You can use style nodes inside the svg element.
Example from MDN:
<svg width="100%" height="100%" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg">
<style>
/* <![CDATA[ */
circle {
fill: orange;
stroke: black;
stroke-width: 10px;
}
/* ]]> */
</style>
<circle cx="50" cy="50" r="40" />
</svg>
You can just append them like you would do in HTML.
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var svg = document.getElementsByTagName("svg")[0];
svg.appendChild(style);

The "sheet" property is missing in SVGStyleElements in IE11
Based on AmeliaBR's answer i made a polyfill:
if (!('sheet' in SVGStyleElement.prototype)) {
Object.defineProperty(SVGStyleElement.prototype, 'sheet', {
get:function(){
var all = document.styleSheets;
for (var i=0, sheet; sheet=all[i++];) {
if (sheet.ownerNode === this) return sheet;
}
}
});
}

How to append an svg loaded by d3.xml into an svg

Trying to load external svgs in to a dynamically created svg but still access the properties of the loaded svgs. That is why I'm using d3.xml but haven't figured out how to integrate it in to the dynamic svg created with d3.
Code and js console here
The code produces this svg
<svg id = "svgObj">
<g class = "grp"></g>
<g class = "grp"></g>
</svg>
I'm trying to load circle.svg within each element so it looks like this
<svg id = "svgObj">
<g class = "grp"><svg id=minus>...</svg></g>
<g class = "grp"><svg id=minus>...</svg></g>
</svg>
I tried the code below but console errors that there is no appendChild method
var grps = d3.selectAll( "g" );
img = grps.appendChild( svgNode.cloneNode( true ) );
Thanks ahead

As #helderdarocha explained, you're mixing up your d3 methods with your plain Javascript methods. That answer gave you how to do it with plain Javascript methods, I'll balance that out by explaining how to do it with d3 methods.
To append a new element within each element of a d3 selection, the method name is simply append, not appendChild. The parameter to append is either a tag name (for which d3 creates a new element of that type for each element in the selection) or a function that returns an actual DOM element (the function will get called for each element in the selection with the data value and index as parameters). Since you're cloning an existing node, that's the version you want to use:
var grps = d3.selectAll( "g" );
img = grps.append( function(){return svgNode.cloneNode( true );} );

I haven't used D3 before but it seems easy to understand. The error message says that Array has no appendChild() method. I read the documentation and discovered that the selections return as double nodes (see Operating on selections) so you would have to add [0][0] (which would select the first node) to be able to use appendChild().
This selects the first node using plain DOM and produces no error (and draws a partial shape on the output):
var grps = d3.selectAll( "g" )[0][0];
Since you need to insert code in each node, you can use each() (see Control) like this:
d3.selectAll( "g" ).each(function() {
img = this.appendChild( svgNode.cloneNode( true ) );
});
I tested it on your code and it produces a black circle with a white dash in the middle. Is that what you expected?

Is there some innerHTML replacement in SVG/XML?

In HTML I can build a simple templating system by providing a template in form of a string, replace some parts of it and then assign it using innerHTML to some container.
var templ = '<span>{myText}</span>'
var newContent = templ.replace( '{myText}', someVariable );
document.querySelector( '#myContainer' ).innerHTML = newContent;
This way I can take advantage of the browser's HTML parser and do not have to repeatedly use document.createElement(). The later can be quite cumbersome, if the templates grows beyond a few elements.
In SVG, however, there is no property on the elements as innerHTML or even innerSVG for that matter.
So my question is: Is there anything I can use in SVG ro resemble the approach from the example above or am I stuck with document.createElement() (or respectivly some lib that uses it)?
As always with my questions: Vanilla JavaScript solutions are preferred, but any pointer to a lib providing a solution is appreciated.

You can use DOMParser to parse XML. You can then use importNode to get that into your existing document if you want via importNode to end up with something like this...
var doc = new DOMParser().parseFromString(
'<svg xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="20"/></svg>',
'application/xml');
someElement.appendChild(
someElement.ownerDocument.importNode(doc.documentElement, true));

Check out the innerSVG javascript shim, it provides the functionality you want.
2014 update: The DOM parsing spec defines innerHTML and outerHTML on Element, which makes these available on svg and xml elements. This has been shipping in Blink for a while now, first versions to support this was Chrome 32 / Opera 19, more details can be found in this bugreport.

Here I write a dirty way...
innerHTML workaround for SVG
http://jsfiddle.net/microbians/8ztNU/
<html>
<body>
<svg id="svgcanvas">
</svg>
<script>
var twocircles='<circle cx="253" cy="562" r="10" stroke="black" stroke-width="2" fill="red"></circle> \
<circle cx="353" cy="562" r="10" stroke="black" stroke-width="2" fill="red"></circle>'
var receptacle = document.createElement('div');
var svgfragment='<svg>'+twocircles+'</svg>';
receptacle.innerHTML=''+svgfragment;
var Nodes=Array.prototype.slice.call(receptacle.childNodes[0].childNodes);
Nodes.forEach(function(el){document.getElementById('svgcanvas').appendChild(el)})
</script>
</body>
</html>
Enjoy!

The short answer is "No, there is nothing equivalent in the world of XML that lets you hand it a bit of markup and have it automatically create all the elements and attributes in the proper namespaces for the location where you insert it."
The closest direct answer is what #Robert has. As noted in my comments, even then you'll need to create any snippets inside an SVG document that has the same namespaces and prefixes as the document into which you'll be inserting the fragment.
Instead, you might find it is as easy (or easier) to use a convenience method on the standard DOM methods:
// Create a named SVG element on a node, with attributes and optional text
function appendTo(node,name,attrs,text){
var p,ns=appendTo.ns,svg=node,doc=node.ownerDocument;
if (!ns){ // cache namespaces by prefix once
while (svg&&svg.tagName!='svg') svg=svg.parentNode;
ns=appendTo.ns={svg:svg.namespaceURI};
for (var a=svg.attributes,i=a.length;i--;){
if (a[i].namespaceURI) ns[a[i].localName]=a[i].nodeValue;
}
}
var el = doc.createElementNS(ns.svg,name);
for (var attr in attrs){
if (!attrs.hasOwnProperty(attr)) continue;
if (!(p=attr.split(':'))[1]) el.setAttribute(attr,attrs[attr]);
else el.setAttributeNS(ns[p[0]]||null,p[1],attrs[attr]);
}
if (text) el.appendChild(doc.createTextNode(text));
return node.appendChild(el);
}
function clear(node){
while (node.lastChild) node.removeChild(node.lastChild);
}
With this you can do things like:
var icons={
Apps : "/images/apps.png",
Games : "/images/games.png"
}
var wrap = document.querySelector('#container');
clear(wrap);
for (var label in icons){
if (!icons.hasOwnProperty(label)) continue;
var icon = appendTo(wrap,'g',{'class':'icon'});
appendTo(icon,'image',{'xlink:href':icons[label]});
appendTo(icon,'text',{x:10,y:20},label);
}
This is IMHO cleaner than trying to construct the raw SVG markup using string concatenation:
var svg = [];
for (var label in icons){
if (!icons.hasOwnProperty(label)) continue;
svg.push('<g class="icon">');
svg.push('<image xlink:href="'+icons[label]+'" />');
svg.push('<text x="10" y="20">'+label+'</text>');
svg.push('</g>');
}
wrap.innerSVG = svg.join(''); // doesn't work, of course

How about my innerSVG shim? CoffeeScript source is below, compiled JavaScript is on https://gist.github.com/2648095
# Important: You must serve your pages as XHTML for this shim to work,
# otherwise namespaced attributes and elements will get messed up.
Object.defineProperty SVGElement.prototype, 'innerHTML',
get: () ->
$temp = document.createElement 'div'
$node = #cloneNode true
for $child in $node.children
$temp.appendChild $child
return $temp.innerHTML
set: (markup) ->
while #firstChild
#firstChild.parentNode.removeChild #firstChild
markup = "<svg id='wrapper' xmlns='http://www.w3.org/2000/svg'>#{markup}</svg>"
$div = document.createElement 'div'
$div.innerHTML = markup
$svg = $div.querySelector 'svg#wrapper'
for $element in $svg.children
#appendChild $element
enumerable : false
configurable : true

With jQuery, you can do it this way:
Let's suppose your svgString contains your svg image after the replacing operations.
$(svgString)[0] to create a svg tag corresponding to your string. Then you can append this element where you want in the dom to draw the image.
I hope this helps

It looks like at least on Chrome and Safari, you can wrap your SVG element in an HTML element and ask for innerHTML. The following HTML file renders a red rectangle, even though the SVG source specifies green.
<body>
<div id="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="120" height="120" viewBox="0 0 236 120">
<rect x="14" y="23" width="250" height="50" fill="green" stroke="black" stroke-width="1" />
</svg>
</div>
<script>
var el = document.getElementById('wrapper');
var t = el.innerHTML;
t = t.replace(/green/g, "red");
el.innerHTML = t;
</script>
</body>

More simply, document.querySelector('#myContainer').textContent = newContent; has pretty good support, def. to IE9+, Safari, FF, Chrome.
Mike Bostock's my hero for these kinds of things: the D3.js source code is my go-to for SVG questions.