SVG element to SVG document

Question

I am working with the google visualization api to create several large charts.
I would like to take the svg element that is generated to turn it into an svg graphic that I can use in Adoble Illustrator.

The element I'm getting looks like this:

<svg width="600" height="400" style="overflow: hidden;"><defs id="defs"><clipPath id="_ABSTRACT_RENDERER_ID_0"><rect x="115" y="77" width="371" height="247"></rect></clipPath></defs><rect x="0" y="0" width="600" height="400" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><text text-anchor="start" x="115" y="54.05" font-family="Arial" font-size="13" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Monthly Coffee Production by Country</text></g><g><rect x="499" y="77" width="88" height="135" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><rect x="499" y="77" width="88" height="13" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="517" y="88.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">Bolivia</text></g><rect x="499" y="77" width="13" height="13" stroke="none" stroke-width="0" fill="#3366cc"></rect></g><g><rect x="499" y="98" width="88" height="13" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="517" y="109.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">Ecuador</text></g><rect x="499" y="98" width="13" height="13" stroke="none" stroke-width="0" fill="#dc3912"></rect></g><g><rect x="499" y="119" width="88" height="13" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="517" y="130.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">Madagas...</text><rect x="517" y="119" width="70" height="13" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g><rect x="499" y="119" width="13" height="13" stroke="none" stroke-width="0" fill="#ff9900"></rect></g><g><rect x="499" y="140" width="88" height="30" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="517" y="151.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">Papua New</text><text text-anchor="start" x="517" y="168.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">Guinea</text></g><rect x="499" y="140" width="13" height="13" stroke="none" stroke-width="0" fill="#109618"></rect></g><g><rect x="499" y="178" width="88" height="13" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="517" y="189.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">Rwanda</text></g><rect x="499" y="178" width="13" height="13" stroke="none" stroke-width="0" fill="#990099"></rect></g><g><rect x="499" y="199" width="88" height="13" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="517" y="210.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">Average</text></g><rect x="499" y="199" width="13" height="13" stroke="none" stroke-width="0" fill="#0099c6"></rect></g></g><g><rect x="115" y="77" width="371" height="247" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g clip-path="url(#_ABSTRACT_RENDERER_ID_0)"><g><rect x="115" y="323" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="115" y="262" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="115" y="200" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="115" y="139" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="115" y="77" width="371" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect></g><g><rect x="130" y="311" width="8" height="12" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="204" y="317" width="8" height="6" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="278" y="312" width="8" height="11" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="352" y="316" width="8" height="7" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="426" y="317" width="8" height="6" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="139" y="152" width="8" height="171" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="213" y="115" width="8" height="208" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="287" y="105" width="8" height="218" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="361" y="117" width="8" height="206" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="435" y="203" width="8" height="120" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="148" y="237" width="8" height="86" stroke="none" stroke-width="0" fill="#ff9900"></rect><rect x="222" y="222" width="8" height="101" stroke="none" stroke-width="0" fill="#ff9900"></rect><rect x="296" y="224" width="8" height="99" stroke="none" stroke-width="0" fill="#ff9900"></rect><rect x="370" y="218" width="8" height="105" stroke="none" stroke-width="0" fill="#ff9900"></rect><rect x="444" y="216" width="8" height="107" stroke="none" stroke-width="0" fill="#ff9900"></rect><rect x="157" y="140" width="8" height="183" stroke="none" stroke-width="0" fill="#109618"></rect><rect x="231" y="85" width="8" height="238" stroke="none" stroke-width="0" fill="#109618"></rect><rect x="305" y="179" width="8" height="144" stroke="none" stroke-width="0" fill="#109618"></rect><rect x="379" y="146" width="8" height="177" stroke="none" stroke-width="0" fill="#109618"></rect><rect x="453" y="134" width="8" height="189" stroke="none" stroke-width="0" fill="#109618"></rect><rect x="166" y="252" width="8" height="71" stroke="none" stroke-width="0" fill="#990099"></rect><rect x="240" y="285" width="8" height="38" stroke="none" stroke-width="0" fill="#990099"></rect><rect x="314" y="263" width="8" height="60" stroke="none" stroke-width="0" fill="#990099"></rect><rect x="388" y="300" width="8" height="23" stroke="none" stroke-width="0" fill="#990099"></rect><rect x="462" y="269" width="8" height="54" stroke="none" stroke-width="0" fill="#990099"></rect></g><g><rect x="115" y="323" width="371" height="1" stroke="none" stroke-width="0" fill="#333333"></rect></g><g><path d="M152.5,218.007L226.5,204.19L300.5,216.28500000000003L374.5,219.073L448.5,227.232" stroke="#0099c6" stroke-width="2" fill-opacity="1" fill="none"></path></g></g><g></g><g><g><text text-anchor="middle" x="152.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">2004/05</text></g><g><text text-anchor="middle" x="226.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">2005/06</text></g><g><text text-anchor="middle" x="300.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">2006/07</text></g><g><text text-anchor="middle" x="374.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">2007/08</text></g><g><text text-anchor="middle" x="448.5" y="343.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#222222">2008/09</text></g><g><text text-anchor="end" x="102" y="328.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">100</text></g><g><text text-anchor="end" x="102" y="266.55" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">400</text></g><g><text text-anchor="end" x="102" y="205.05" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">700</text></g><g><text text-anchor="end" x="102" y="143.55" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">1,000</text></g><g><text text-anchor="end" x="102" y="82.05000000000003" font-family="Arial" font-size="13" stroke="none" stroke-width="0" fill="#444444">1,300</text></g></g></g><g><g><text text-anchor="middle" x="300.5" y="377.05" font-family="Arial" font-size="13" font-style="italic" stroke="none" stroke-width="0" fill="#222222">Month</text></g><g><text text-anchor="middle" x="39.55" y="200.5" font-family="Arial" font-size="13" font-style="italic" transform="rotate(-90 39.55 200.5)" stroke="none" stroke-width="0" fill="#222222">Cups</text></g></g><g></g></svg>

It displays exactly as I want it to in a browser, but it unrecognizable to Adobe Illustrator (not unexpected, I guess).

Any thoughts on how to approach converting this into an SVG file/import to Illustrator?

I found this useful tutorial on how to convert it into a png, but I would really like to preserve it as a vector graphic.

http://www.dannyoosterveer.nl/how-to-save-google-charts-visualizations-to-an-image-file-in-a-user-friendly-way/

Answer 1

The code is lacking the namespace declaration:

<svg 
  xmlns="http://www.w3.org/2000/svg"
  width="600" height="400" style="overflow: hidden;">
  ...