SVG元素到SVG文档

时间:2013-12-05 19:46:07

标签: svg google-visualization adobe-illustrator

我正在使用google visual api创建几个大型图表 我想将生成的svg元素转换为可以在Adoble Illustrator中使用的svg图形。

我得到的元素看起来像这样:

<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>

它在浏览器中完全按照我的要求显示,但Adobe Illustrator无法识别(我猜不出意料)。

有关如何将此转换为SVG文件/导入到Illustrator的任何想法?

我找到了有关如何将其转换为png的有用教程,但我真的希望将其保存为矢量图形。

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

1 个答案:

答案 0 :(得分:2)

代码缺少名称空间声明:

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