Created
October 8, 2010 13:06
-
-
Save abitgone/616753 to your computer and use it in GitHub Desktop.
Real-world Example of using SVG in HTML
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?xml version="1.0" encoding="UTF-8" standalone="no"?> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 1000" width="10cm" height="20cm"> | |
| <path | |
| style="fill: #fff; stroke: none;" | |
| d="M -100,-100 500,500 -100,1100 500,1100 500,-100 z" | |
| /> | |
| </svg> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Bear in mind that this CSS is being used exclusively for print | |
| * purposes, hence the usage of mm as a unit. | |
| */ | |
| #Emissions { | |
| position: relative; | |
| height: 15mm; | |
| width: 35mm; | |
| background: #ccc url(arrow-mask.svg) no-repeat right center; | |
| padding: 3mm; | |
| } | |
| #Emissions.BandE { | |
| background-color: #A9CA2A; color: #000; | |
| } | |
| #Emissions .Band, | |
| #Emissions .CO2 { | |
| position: absolute; | |
| float: left; | |
| display: block; | |
| height: 15mm; | |
| } | |
| #Emissions .Band { | |
| width: 8mm; | |
| left: 4mm; | |
| font-size: 15mm; | |
| text-align: center; | |
| font-weight: bold; | |
| } | |
| #Emissions .CO2 { | |
| width: 15mm; | |
| left: 15mm; | |
| top: 5mm; | |
| line-height: 0.9; | |
| text-align: center; | |
| } | |
| #Emissions .Amount { | |
| font-size: 7mm; | |
| line-height: 7mm; | |
| } | |
| #Emissions .Unit, | |
| #Emissions .Measure { | |
| display: block; | |
| } | |
| #Emissions .Unit { | |
| font-size: 3mm; line-height: 3mm; | |
| } | |
| #Emissions .Measure { | |
| font-size: 2mm; line-height: 2mm; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html> | |
| <head> | |
| <title>SVG called by CSS test</title> | |
| <link rel="stylesheet" href="base.css" type="text/css" /> | |
| </head> | |
| <body> | |
| <div id="Emissions" class="BandE"> | |
| <span class="Band">E</span> | |
| <span class="CO2"> | |
| <span class="Amount">137</span> | |
| <span class="Unit">g/km</span> | |
| <span class="Measure">CO<sub>2</sub></span> | |
| </span> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks to @erikdahlstrom for the correction regarding the correct casing of viewBox (capital B) and the addition of the SVG namespace to the root SVG node. Works a treat in Opera, WebKit browsers and I'm guessing IE9 too - but not Firefox. Pity!