File talk:US unemployment rate under President Obama.svg
Jump to navigation
Jump to search
Source[edit]
Mark and copy the following text. Paste it into a plain text file. The text file should have an svg extension, for example mychart.svg.
You can check the result with Toolforge tool SVGCheck (upload file temporarily), in W3Schools Tryit Editor (insert source code) or in Commons with File:Test.svg (upload as new file revision).
<?xml version="1.0" encoding="UTF-8" ?>
<!-- Generator: wikimedia.svg.chart, 2013-08-28 -->
<!-- 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="-3.774375,-12.275,38.524375,15.575"
width="750" height="300"
font-family="Helvetica, Arial, Liberation Sans"
>
<!-- also a workaround for librsvg: a <rect> must be placed somewhere before text for a good display of text -->
<rect id="imagebackground" x="-3.774" y="-12.275" width="38.52" height="15.58" stroke-width="0.02" stroke="none" fill="white"/>
<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.
---------------- All values are scaled by 1. This is necessary to keep the lines from turning into ribbons.
</desc>
<style id="styles" type="text/css"> <![CDATA[
.graphgeneral { /*-- general look of graphs and markers, e.g. in legend --*/
stroke-width: 0.173;
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
}
.graphgeneralstretch { /*-- general look of graphs and markers on a stretched chart --*/
stroke-width: 0.101;
fill: none;
stroke-linejoin: round;
stroke-linecap: round;
}
.graph1lineblank { /*-- look of graph 1 --*/
stroke: #000000;
}
.graph1line {
stroke: #000000;
}
.graph2lineblank { /*-- look of graph 2 --*/
stroke: rgb(75%, 10%, 10%);
}
.graph2line {
stroke: rgb(75%, 10%, 10%);
}
.graph3lineblank { /*-- look of graph 3 --*/
stroke: rgb(00%, 60%, 00%);
}
.graph3line {
stroke: rgb(00%, 60%, 00%);
}
.graph4lineblank { /*-- look of graph 4 --*/
stroke: rgb(00%, 60%, 60%);
}
.graph4line {
stroke: rgb(00%, 60%, 60%);
}
.graph5lineblank { /*-- look of graph 5 --*/
stroke: rgb(60%, 00%, 60%);
}
.graph5line {
stroke: rgb(60%, 00%, 60%);
}
.graph6lineblank { /*-- look of graph 6 --*/
stroke: rgb(60%, 60%, 00%);
}
.graph6line {
stroke: rgb(60%, 60%, 00%);
}
.graph7lineblank { /*-- look of graph 7 --*/
stroke: rgb(00%, 00%, 30%);
}
.graph7line {
stroke: rgb(00%, 00%, 30%);
}
.graph8lineblank { /*-- look of graph 8 --*/
stroke: rgb(00%, 30%, 00%);
}
.graph8line {
stroke: rgb(00%, 30%, 00%);
}
.axisline {
stroke: black;
stroke-width: 0.087;
stroke-linecap: round;
}
.titletext {
font-size: 1.225px;
}
.axistext-x {
font-size: 1.114px;
}
.axistext-x-number {
font-size: 1.114px;
}
.axistext-y {
font-size: 1.114px;
}
.axismark-main {
stroke: black;
stroke-width: 0.061;
}
.axismark-second {
stroke: black;
stroke-width: 0.061;
}
.legendtext {
font-size: 1.114px;
text-anchor: start;
}
]]></style>
<defs>
<!--== axis dashes definitions ==-->
<!-- x-axis mark, modify "height" -->
<pattern id="x-axismark-main" x="0" width="10" height="0.4" patternUnits="userSpaceOnUse">
<line x1="0" y1="-1" x2="0" y2="0.4" class="axismark-main"/>
</pattern>
<!-- y-axis mark, modify "width" -->
<pattern id="y-axismark-main" width="0.4" height="10" patternUnits="userSpaceOnUse">
<line x1="-1" y1="0" x2="0.4" y2="0" class="axismark-main"/>
</pattern>
<!-- y-axis2 mark, modify "width" -->
<pattern id="y-axis2mark-main" width="0.2" 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.1" y="-0.4" width="25.2" height="0.35" fill="url(#x-axismark-main)"/>
<line id="x-axis" x1="0" y1="0" x2="25" y2="0" class="axisline"/>
<!-- y axis, modify "height" -->
<rect id="y-axismark" x="-0.35" y="-0.1" width="0.35" height="12.4" fill="url(#y-axismark-main)"/>
<line id="y-axis" x1="0" y1="0" x2="0" y2="11.4" class="axisline"/>
</g>
<!-- x axis text, modify each value -->
<g id="axistext-x" class="axistext-x-number" transform="translate(0, 1.4)" text-anchor="middle">
<text id="title-x" class="axistext-x" x="12.375" y="1.4" > <tspan dy="-0.024px"/></text>
</g>
<!-- y axis text, modify each value -->
<g id="axistext-y" class="axistext-y" text-anchor="end" transform="translate(-0.7, 0.4)">
<text y= "-0"> <tspan dy="-0.024px"/>4%</text>
<text y="-1.75"> <tspan dy="-0.024px"/>5%</text>
<text y="-3.5"> <tspan dy="-0.024px"/>6%</text>
<text y="-5.25"> <tspan dy="-0.024px"/>7%</text>
<text y= "-7"> <tspan dy="-0.024px"/>8%</text>
<text y="-8.75"> <tspan dy="-0.024px"/>9%</text>
<text y="-10.5"> <tspan dy="-0.024px"/>10%</text>
<text y="-12.25"> <tspan dy="-0.024px"/>11%</text>
<text y="-14"> <tspan dy="-0.024px"/>12%</text>
<text y="-15.75"> <tspan dy="-0.024px"/>13%</text>
<text y="-17.5"> <tspan dy="-0.024px"/>14%</text>
<text y="-19.25"> <tspan dy="-0.024px"/>15%</text>
<text y="-21"> <tspan dy="-0.024px"/>16%</text>
<text y="-22.75"> <tspan dy="-0.024px"/>17%</text>
<text y="-24.5"> <tspan dy="-0.024px"/>18%</text>
<text y="-26.25"> <tspan dy="-0.024px"/>19%</text>
<text y="-28"> <tspan dy="-0.024px"/>20%</text>
<text y="-29.75"> <tspan dy="-0.024px"/>21%</text>
<text y="-31.5"> <tspan dy="-0.024px"/>22%</text>
<text y="-33.25"> <tspan dy="-0.024px"/>23%</text>
<text id="title-y" x="5.7" y="-2" transform="rotate(-90)" text-anchor="middle" > <tspan dy="-0.024px"/></text>
</g>
<!-- legend -->
<g id="legend" class="legendtext" transform="translate(26, -10.2)">
<g id="legend-background" class="axismark-main">
<rect x="0" y="0" fill="white" width="8" height="3"/>
</g>
<g class="graphgeneral"><g class="graph1line">
<polyline id="legend-line1" points="0.5 0.86 1.73 0.86" marker-start="none" marker-end="none"/>
</g></g>
<text id="legend-text1" x="2.2" y="1.19"> <tspan dy="-0.024px"/>1st W </text>
<g class="graphgeneral"><g class="graph2line">
<polyline id="legend-line2" points="0.5 2.08 1.73 2.08" marker-start="none" marker-end="none"/>
</g></g>
<text id="legend-text2" x="2.2" y="2.41"> <tspan dy="-0.024px"/>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">
<!-- graph 2 -->
<polyline id="graph2" points="
25 40
40 10
55 35
70 10
85 40
"/>
</g>
<g id="graph1">
<!-- graph 1 -->
<polyline id="graph1-line" stroke-width="0.101" points="
15 40
30 10
45 35
60 10
75 40
"/>
</g>
</defs>
<g class="graphgeneralstretch" transform="scale(3, -1.8) translate(-2009, -4)">
<!-- graph 2 -->
<use id="graphuse2p2" transform="translate(0, 0.035)" class="graph2lineblank" xlink:href="#graph2"/>
<use id="graphuse2m2" transform="translate(0, -0.035)" class="graph2lineblank" xlink:href="#graph2"/>
<use id="graphuse2-1" transform="translate(0, 0)" class="graph2line" xlink:href="#graph2"/>
<!-- graph 1 -->
<use id="graphuse1p2" transform="translate(0, 0.035)" class="graph1lineblank" xlink:href="#graph1"/>
<use id="graphuse1m2" transform="translate(0, -0.035)" class="graph1lineblank" xlink:href="#graph1"/>
<use id="graphuse1-1" transform="translate(0, 0)" class="graph1line" xlink:href="#graph1"/>
</g>
</svg>
Text not working right in Firefox and Chrome. SOLVED[edit]
In Firefox I looked at all versions from 02:18, 6 September 2015 (the current chart now) back to October 2014. None of them look right (when I right click all versions and open in a new tab). The text looks like this black blob that covers nearly all of the chart. But the current chart on the image page itself is different. The text overlaps itself.
I remember that this looked right in the past. So maybe something has changed with how the MediaWiki software is creating the chart from the SVG.
Chrome is weird too. When I right click all versions (including the current version) and open in a new tab, they all look correct. But the current version (02:18, 6 September 2015) does not look right on the image page itself: File:US unemployment rate under President Obama.svg. The text overlaps itself. --Timeshifter (talk) 01:43, 8 September 2015 (UTC)
- The latest upload by Guy vandegrift has fixed the problem for me. --Timeshifter (talk) 05:27, 10 September 2015 (UTC)
