Questions tagged [svg]

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 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 -based format, it can be embedded within 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

Example SVG Scene

Useful links

SVG Editors

SVG Manipulation Libraries

43459 questions
240
votes
9 answers

Resizing SVG in HTML?

I have an SVG file inside HTML, and one of the things I've heard about the format is that it doesn't get all pixelated when you zoom in on it. I know with a JPEG or whatever I could have it stored as a 50 by 50 icon, then actually display it as a…
J.R.
  • 5,789
  • 11
  • 55
  • 78
240
votes
1 answer

Right mime type for SVG images with fonts embedded

This is the usual SVG mime type: image/svg+xml And it works great. However, when embedding an SVG font, chrome tells you the mime type is incorrect, obviously because you return a font instead of an image. Is there any universal mime type? is…
cmplieger
  • 7,155
  • 15
  • 55
  • 83
239
votes
18 answers

How to use z-index in svg elements?

I'm using the svg circles in my project like this,
Karthi Keyan
  • 4,243
  • 5
  • 24
  • 47
232
votes
5 answers

SVG: text inside rect

I want to display some text inside SVG rect. Is it possible? I tried
Jakub M.
  • 32,471
  • 48
  • 110
  • 179
229
votes
11 answers

How do I create a teardrop in HTML?

How do I create a shape like this to display on a webpage? I don't want to use images since they would get blurry on scaling I tried with CSS: .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; …
Persijn
  • 14,624
  • 3
  • 43
  • 72
227
votes
8 answers

How can I remove or replace SVG content?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that each time I click on the update button, it…
Sami
  • 7,797
  • 18
  • 45
  • 69
220
votes
17 answers

jquery's append not working with svg element?

Assuming this: