Scalable Vector Graphics (SVG) is an XML-based two-dimensional vector graphics format that can also be used in HTML. Do not add this tag just because your project uses SVG. Instead, add the tag if your question is either about SVG or closely related, like how to achieve something with SVG.
Scalable Vector Graphics
Scalable Vector Graphics (SVG) is a markup language for describing two-dimensional vector-graphics images, animations, and applications. SVG is also a set of related graphics script interfaces. The SVG format differs from raster formats by encoding graphics predominately using math and matrix transformations, which allows SVG output to be resolution-independent. While SVG is an xml-based format, it can be embedded within html using HTML parsing rules.
The current version is SVG 1.1 (Second Edition), released in 2011. SVG 1.2 is unpublished, the latest version is from 2005. SVG 2 is under active development.
Example SVG file
The following shows a fuchsia-coloured circle having a thick black border situated above text rotated by 15 degrees.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" version="1.1">
<style type="text/css">
circle { fill: fuchsia; stroke: black; stroke-width:2 }
text { font: 12pt sans-serif }
</style>
<circle cx="30" cy="20" r="10"/>
<text x="10" y="40" transform="rotate(15)">Rotated text</text>
</svg>
Rendered result
Useful links
- W3C Scalable Vector Graphics home page
- Scalable Vector Graphics Wikipedia
- An SVG Primer for Today's Browsers
- SVG on the Mozilla Developer Network
- Browser support for SVG
- W3Schools
css
.logo-img path {
fill: #000;
}
The above svg loads and is natively fill: #fff but when I use the above css to try change it to black it doesn't change, this is my first time playing with…
foo.svg:
