title: loading external SVG with jQuery and change the SVG
body: <p>I need to load an existing SVG document in order to do some modifications: changing color and replace all circles by rectangles.</p>
  
  <p>I read a lout about using javascript to access SVG nodes, or Raphael extension or jQuery SVG.</p>
  
  <p>I decided to use jQuery SVG, because (in one of the documents I read there was written:) it's not possible to change an existing, loaded SVG with Raphael. I'm not sure, if it is true.</p>
  
  <p>On the other hand, some ware was written: jQuery SVG plugin is outdated?!</p>
  
  <p>I'm not sure, if this is correct.</p>
  
  <p>Right now, I use jQuery SVG plugin to load the SVG. The SVG consists of many circles, like this:</p>
  
  <pre><code>&lt;svg version="1.1" width="" height=""&gt;
   &lt;rect class="background" x="0" y="0" width="136" height="136" style="fill:white"/&gt;
   &lt;circle class="dot" cx="10" cy="10" r="2"/&gt;
   &lt;circle class="dot" cx="14" cy="10" r="2"/&gt;
   &lt;circle class="dot" cx="18" cy="10" r="2"/&gt;
   &lt;circle class="dot" cx="22" cy="10" r="2"/&gt;
    [...]
   &lt;style&gt;
    .dot {fill:#000000;}
   &lt;/style&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Now it should be possible:
  1.) to change the color of all the circles by changing the class <code>dot</code> and
  2.) replace all circles by rectangles.</p>
  
  <p>To reach the first goal, I use <code>svg.style()</code>, like this:</p>
  
  <pre><code>mainSVG = $("#placehoplder").svg('get');
  mainSVG.load(data, {addTo: true,  changeSize: false}); 
  mainSVG.style('.dot {fill:'#f4a200'}');
  </code></pre>
  
  <p>This works, but it adds an additional style element/node to the SVG. </p>
  
  <p>So the 1st question is: how to change/overwrite an exiting style element?</p>
  
  <p>To reach the 2nd goal: I have no idea, how to handle this.</p>
  
  <p>I have no idea, how to select SVG element in general. Using google, I still find the same stackoverflow questions again and again, which doesn't help me. Also the jQuery SVG documentation is not helpful at my point of knowledge. (because basics are missing)</p>
  
  <p>For example this simple test to change the radius of all circles does not work.</p>
  
  <pre><code>allCircles=$('*[class~="dot"]');
  mainSVG.change(allCircles,{r:10});
  </code></pre>
  
  <p>So the 2nd Question is:
  How to select a group of SVG elements (by class or element-type) in order to change them (or may i have to iterate trough?)?</p>
  
  <p>Thank you.</p>