User:Con-struct/TestAutoSVG
Mark and copy the following text. Paste it into a plain text file. The text file must have a svg extension, for example mygraphic.svg.
<?xml version="1.0" encoding="UTF-8" ?>
<!-- Generator: commons.diagram, 2013-04-06 -->
<!-- modify viewBox (x,y,dx,dy) for position (x,y) and size (dx,dy) -->
<svg id="head"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
viewBox="-22,-56,173.8,76"
width="750" height="330"
font-family="Helvetica, Arial"
>
<title>plain text svg graphic</title>
<desc>
This svg graphic is to edit with an text editor.
Please do not overwrite this file by saving with an image editor.
</desc>
<style id="styles" type="text/css"> <![CDATA[
.graphgeneral { /*-- general look of graphs and markers, i. e. in legend --*/
stroke-width: 0.6;
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
}
.graphgeneralstretch { /*-- general look of graphs and markers on a stretched diagram --*/
stroke-width: 0.6;
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
}
.graph1lineblank { /*-- look of graph 1 --*/
stroke: rgb(00%, 00%, 60%);
}
.graph1line {
stroke: rgb(00%, 00%, 60%);
}
.graph2lineblank { /*-- look of graph 2 --*/
stroke: rgb(60%, 00%, 00%);
}
.graph2line {
stroke: rgb(60%, 00%, 00%);
}
.axisline {
stroke: black;
stroke-width: 0.3;
stroke-linecap: round;
}
.titletext {
font-size: 7.2px;
}
.axistext-x {
font-size: 6px;
}
.axistext-x-number {
font-size: 6px;
}
.axistext-y {
font-size: 6px;
}
.axismark-main {
stroke: black;
stroke-width: 0.2;
}
.axismark-second {
stroke: black;
stroke-width: 0.2;
}
.legendtext {
font-size: 6px;
text-anchor: start;
}
]]></style>
<!-- this is only a workaround for librsvg: <rect> must be placed somewhere -->
<rect id="librsvg-bettertextposition" x="-0.35" y="- 0.1" width="1" height="1" stroke-width="0.1" stroke="white" fill="none"/>
<defs>
<!--== axis dashes definitions ==-->
<!-- x-axis mark, modify "height" -->
<pattern id="x-axismark-main" x="0" width="10" height="1" patternUnits="userSpaceOnUse">
<line x1="0" y1="-1" x2="0" y2="11" class="axismark-main"/>
</pattern>
<!-- y-axis mark, modify "width" -->
<pattern id="y-axismark-main" width="1" height="10" patternUnits="userSpaceOnUse">
<line x1="-1" y1="0" x2="11" y2="0" class="axismark-main"/>
</pattern>
<!-- y-axis2 mark, modify "width" -->
<pattern id="y-axis2mark-main" width="1" height="10" patternUnits="userSpaceOnUse">
<line x1="-1" y1="0" x2="11" y2="0" class="axismark-main"/>
</pattern>
</defs>
<g transform="scale(1, -1)">
<!-- x axis, modify "x2" and "width" -->
<rect id="x-axismark" x="-0.5" y="-1.8" width="102" height="1.75" fill="url(#x-axismark-main)"/>
<line id="x-axis" x1="0" y1="0" x2="100" y2="0" class="axisline"/>
<!-- y axis, modify "height" -->
<rect id="y-axismark" x="-1.75" y="- 0.5" width="1.75" height="51" fill="url(#y-axismark-main)"/>
<line id="y-axis" x1="0" y1="0" x2="0" y2="50" class="axisline"/>
</g>
<!-- x axis text, modify each value -->
<g id="axistext-x" class="axistext-x-number" transform="translate(0, 7.8)" text-anchor="middle">
<text x= "0">0</text>
<text x= "10">10</text>
<text x= "20">20</text>
<text x= "30">30</text>
<text x= "40">40</text>
<text x= "50">50</text>
<text x= "60">60</text>
<text x= "70">70</text>
<text x= "80">80</text>
<text x= "90">90</text>
<text x="100">100</text>
<text id="title-x" class="axistext-x" x="50" y="7.8" >Values of x axis</text>
</g>
<!-- y axis text, modify each value -->
<g id="axistext-y" class="axistext-y" text-anchor="end" transform="translate(-3, 1.5)">
<text y= "-0">0</text>
<text y= "-10">10</text>
<text y= "-20">20</text>
<text y= "-30">30</text>
<text y= "-40">40</text>
<text y= "-50">50</text>
<text id="title-y" x="25" y="-9.2" transform="rotate(-90)" text-anchor="middle" >Values of y axis</text>
</g>
<!-- legend -->
<g id="legend" class="legendtext" transform="translate(105, -45)">
<rect id="legend-background" x="0" y="0" class="axismark-main" fill="white" width="40.8" height="16.2"/>
<g class="graphgeneral"><g class="graph1line">
<polyline id="legend-line1" points="2 4.62 7 4.62" marker-start="none" marker-end="none"/>
</g></g>
<text id="legend-text1" x="9" y="5.94">1st W </text>
<g class="graphgeneral"><g class="graph2line">
<polyline id="legend-line2" points="2 11.22 7 11.22" marker-start="none" marker-end="none"/>
</g></g>
<text id="legend-text2" x="9" y="12.54">2nd W </text>
</g>
<!--====== graph data with origin values, you can manually copy or attach the values here ======-->
<!-- modify displacement "translate" -->
<defs>
<g id="graphs">
<polyline id="graph2" points="
25 40
40 10
55 35
70 10
85 40
"/>
</g>
<g id="graph1">
<!-- -->
<polyline id="graph1-line" stroke-width="0.6" points="
15 40
30 10
45 35
60 10
75 40
"/>
</g>
</defs>
<g class="graphgeneralstretch" transform="scale(1, -1) translate(-0, -0)">
<!-- graph 2 -->
<use transform="translate(0, 0)" class="graph2line" xlink:href="#graph2"/>
<!-- graph 1 -->
<use transform="translate(0, 0)" class="graph1line" xlink:href="#graph1"/>
</g>
</svg>