Does the attr() in jQuery force lowercase?

I was able to use pure javascript to get the element and set the attribute by using

var svg = document.getElementsByTagName("svg")[0];

and

svg.setAttribute("viewBox","...");

Per http://www.w3.org/TR/xhtml1/#h-4.2 "XHTML documents must use lower case for all HTML element and attribute names."

So in order to avoid having the attribute convert to lowercase in an XHTML document you need to create the element specifying a namespace using document.createElementNS(), like:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');    svg.setAttribute('viewBox', '0 0 512 512’);

If you plan to add a <use/> element you also need to specify the namespace while creating the element as well as the xlink:href attribute, like:

var use = document.createElementNS('http://www.w3.org/2000/svg','use');    use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#your_svg_id');

You could use jQuery hooks:

['preserveAspectRatio', 'viewBox'].forEach(function(k) {  $.attrHooks[k.toLowerCase()] = {    set: function(el, value) {      el.setAttribute(k, value);      return true;    },    get: function(el) {      return el.getAttribute(k);    },  };});

Now jQuery will will use your setter/getters to manipulate those attributes.

Note that el.attr('viewBox', null) would have failed; your hook setter won't be called. Instead you should use el.removeAttr('viewBox').