Style attributes

[roryashfordbentley]

Playing around with this some more I have noticed that SVG's can store style attributes in a multitude of places other that 'paths'. As an example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="299" height="35" viewBox="0 0 299 35" class="replace-svg replaced-svg">
  <defs>
    <style>
      .cls-2 {
        fill: #ef492e;
      }
    </style>
  </defs>
  <path d="" id="path-1" class="cls-2"></path>
</svg>

There are also shape elements (<circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>) which can contain style tags. There may be others too from this list: https://developer.mozilla.org/en-US/docs/Web/SVG/Element

The above svg code was generated by Adobe3 Photoshop CC 2014 using the Extract Assets function.

[roryashfordbentley]

This may be a better option:

function removeStyles(el) {
    el.removeAttribute('style');

    if(el.childNodes.length > 0) {
        for(var child in el.childNodes) {
             /* filter element nodes only */
             if(el.childNodes[child].nodeType == 1)
                 removeStyles(el.childNodes[child]);
              }
        }
    }

Nicked from here: http://stackoverflow.com/questions/9252839/simplest-way-to-remove-all-the-styles-in-a-page

[roryashfordbentley]

Just to throw yet another spanner in the works style can be set using a <style> element as well as an attribute.