Example Large svg

large_svg.svg

<svg xmlns="http://www.w3.org/2000/svg" width="810" height="500"><g transform="translate(70,40)"><g class="x axis" transform="translate(0,330)"><g class="tick" style="opacity: 1;" transform="translate(59.5,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle; text-transform: capitalize; font-family: Helvetica;" y="9" x="0">18-24</text></g><g class="tick" style="opacity: 1;" transform="translate(167.5,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle; text-transform: capitalize; font-family: Helvetica;" y="9" x="0">25-34</text></g><g class="tick" style="opacity: 1;" transform="translate(275.5,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle; text-transform: capitalize; font-family: Helvetica;" y="9" x="0">35-44</text></g><g class="tick" style="opacity: 1;" transform="translate(383.5,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle; text-transform: capitalize; font-family: Helvetica;" y="9" x="0">45-54</text></g><g class="tick" style="opacity: 1;" transform="translate(491.5,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle; text-transform: capitalize; font-family: Helvetica;" y="9" x="0">55-64</text></g><g class="tick" style="opacity: 1;" transform="translate(599.5,0)"><line y2="6" x2="0"></line><text dy=".71em" style="text-anchor: middle; text-transform: capitalize; font-family: Helvetica;" y="9" x="0">65+</text></g><path class="domain" d="M0,6V0H660V6" style="fill: none; stroke: #000; shape-rendering: crispEdges; opacity: 0.4;"></path></g><g class="y axis"><g class="tick" style="opacity: 1;" transform="translate(0,330)"><line x2="-6" y2="0"></line><text dy=".32em" style="text-anchor: end; text-transform: capitalize; font-family: Helvetica;" x="-9" y="0">0</text></g><g class="tick" style="opacity: 1;" transform="translate(0,300)"><line x2="-6" y2="0"></line><text dy=".32em" style="text-anchor: end; text-transform: capitalize; font-family: Helvetica;" x="-9" y="0">1</text></g><g class="tick" style="opacity: 1;" transform="translate(0,270)"><line x2="-6" y2="0"></line><text dy=".32em" style="text-anchor: end; text-transform: capitalize; font-family: Helvetica;" x="-9" y="0">2</text></g><g class="tick" style="opacity: 1;" transform="translate(0,240)"><line x2="-6" y2="0"></line><text dy=".32em" style="text-anchor: end; text-transform: capitalize; font-family: Helvetica;" x="-9" y="0">3</text></g><g class="tick" style="opacity: 1;" transform="translate(0,210)"><line x2="-6" y2="0"></line><text dy=".32em" style="text-anchor: end; text-transform: capitalize; font-family: Helvetica;" x="-9" y="0">4</text></g><g class="tick" style="opacity: 1;" transform="translate(0,180)"><line x2="-6" y2="0"></line><text dy=".32em" style="text-anchor: end; text-transform: capitalize; font-family: Helvetica;" x="-9" y="0">5</text></g><g class="tick" style="opacity: 1;" transform="translate(0,150)"><line x2="-6" y2="0"></line><text dy=".32em" style="text-anchor: end; text-transform: capitalize; font-family: Helvetica;" x="-9" y="0">6</text></g><g class="tick" style="opacity: 1;" transform="translate(0,120)"><line x2="-6" y2="0"></line><text dy=".32em" style="text-anchor: end; text-transform: capitalize; font-family: Helvetica;" x="-9" y="0">7</text></g><g class="tick" style="opacity: 1;" transform="translate(0,90)"><line x2="-6" y2="0"></line><text dy=".32em" style="text-anchor: end; text-transform: capitalize; font-family: Helvetica;" x="-9" y="0">8</text></g><g class="tick" style="opacity: 1;" transform="translate(0,59.999999999999986)"><line x2="-6" y2="0"></line><text dy=".32em" style="text-anchor: end; text-transform: capitalize; font-family: Helvetica;" x="-9" y="0">9</text></g><g class="tick" style="opacity: 1;" transform="translate(0,30.00000000000001)"><line x2="-6" y2="0"></line><text dy=".32em" style="text-anchor: end; text-transform: capitalize; font-family: Helvetica;" x="-9" y="0">10</text></g><g class="tick" style="opacity: 1;" transform="translate(0,0)"><line x2="-6" y2="0"></line><text dy=".32em" style="text-anchor: end; text-transform: capitalize; font-family: Helvetica;" x="-9" y="0">11</text></g><path class="domain" d="M-6,0H0V330H-6" style="fill: none; stroke: #000; shape-rendering: crispEdges; opacity: 0.4;"></path><text y="-25" dy="0.5em" style="text-anchor: end;">Voters</text></g><text y="346" x="670">Ages</text><g class=".ages" transform="translate(11,0)"><rect width="48" x="1" y="300" height="30" fill="#3377ff"></rect><rect width="48" x="49" y="300" height="30" fill="#e68a00"></rect><text x="16" y="290" style="font-size: 14; text-anchor: start;" dy=".35em">1</text><text x="64" y="290" style="font-size: 14; text-anchor: start;" dy=".35em">1</text></g><g class=".ages" transform="translate(119,0)"><rect width="48" x="1" y="300" height="30" fill="#3377ff"></rect><rect width="48" x="49" y="300" height="30" fill="#e68a00"></rect><text x="16" y="290" style="font-size: 14; text-anchor: start;" dy=".35em">1</text><text x="64" y="290" style="font-size: 14; text-anchor: start;" dy=".35em">1</text></g><g class=".ages" transform="translate(227,0)"><rect width="48" x="1" y="300" height="30" fill="#3377ff"></rect><rect width="48" x="49" y="300" height="30" fill="#e68a00"></rect><text x="16" y="290" style="font-size: 14; text-anchor: start;" dy=".35em">1</text><text x="64" y="290" style="font-size: 14; text-anchor: start;" dy=".35em">1</text></g><g class=".ages" transform="translate(335,0)"><rect width="48" x="1" y="300" height="30" fill="#3377ff"></rect><rect width="48" x="49" y="300" height="30" fill="#e68a00"></rect><text x="16" y="290" style="font-size: 14; text-anchor: start;" dy=".35em">1</text><text x="64" y="290" style="font-size: 14; text-anchor: start;" dy=".35em">1</text></g><g class=".ages" transform="translate(443,0)"><rect width="48" x="1" y="300" height="30" fill="#3377ff"></rect><rect width="48" x="49" y="0" height="330" fill="#e68a00"></rect><text x="16" y="290" style="font-size: 14; text-anchor: start;" dy=".35em">1</text><text x="64" y="-10" style="font-size: 14; text-anchor: start;" dy=".35em">11</text></g><g class=".ages" transform="translate(551,0)"><rect width="48" x="1" y="300" height="30" fill="#3377ff"></rect><rect width="48" x="49" y="300" height="30" fill="#e68a00"></rect><text x="16" y="290" style="font-size: 14; text-anchor: start;" dy=".35em">1</text><text x="64" y="290" style="font-size: 14; text-anchor: start;" dy=".35em">1</text></g><g class="legend" transform="translate(55,0)"><rect x="642" y="15" width="18" height="18" style="fill: #3377ff;"></rect><text x="636" y="22" dy=".35em" style="text-anchor: end;">men</text></g><g class="legend" transform="translate(55,20)"><rect x="642" y="15" width="18" height="18" style="fill: #e68a00;"></rect><text x="636" y="22" dy=".35em" style="text-anchor: end;">women</text></g></g></svg>