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 to it, 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

38473 questions
284
votes
13 answers

How do I center an SVG in a div?

I have an SVG that I am trying to center in a div. The div has a width or 900px. The SVG has a width of 400px. The SVG has its margin-left and margin-right set to auto. Doesn't work, it just acts as if the left margin is 0 (default). Anyone know my…
Don P
  • 49,839
  • 95
  • 259
  • 394
282
votes
7 answers

How can I make an svg scale with its parent container?

I want to have an inline svg element's contents scale when size is non-native. Of course I could have it as a separate file and scale it like that. index.html: foo.svg:
bjb568
  • 9,826
  • 11
  • 45
  • 66
266
votes
15 answers

How to convert a PNG image to a SVG?

How to convert a PNG image to a SVG?
user199337
  • 7,393
  • 7
  • 21
  • 18
255
votes
14 answers

jQuery SVG vs. Raphael

I'm working on an interactive interface using SVG and JavaScript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know What the trade-offs are between the two Where the development momentum seems to be. I don't need…
Luke Dennis
  • 13,172
  • 17
  • 52
  • 66
241
votes
4 answers

Are SVG parameters such as 'xmlns' and 'version' needed?

In about half of the svg examples I see on the internet, the code is wrapped in plain simple tags. In the other half, the svg tags have lots of complicated attributes like this:
Lars
  • 6,670
  • 9
  • 45
  • 65
239
votes
8 answers

Can I change the fill color of an svg path with CSS?

I have the following code:
Samantha J T Star
  • 26,790
  • 72
  • 224
  • 390
233
votes
10 answers

How to place and center text in an SVG rectangle

I have the following rectangle... I would like to center the word "Fiction" inside of it. For other rectangles, does svg word wrap to stay within them? I can't seem to find anything specifically…
Lady Aleena
  • 2,477
  • 2
  • 14
  • 13
227
votes
12 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
  • 13,675
  • 2
  • 40
  • 70
226
votes
11 answers

Can you control how an SVG's stroke-width is drawn?

Currently building a browser-based SVG application. Within this app, various shapes can be styled and positioned by the user, including rectangles. When I apply a stroke-width to an SVG rect element of say 1px, the stroke is applied to the rect’s…
Steve
  • 2,925
  • 5
  • 18
  • 20
218
votes
5 answers

SVG Positioning

I'm having a play with SVG and am having a few problems with positioning. I have a series of shapes which are contained in the g group tag. I was hoping to use it like a container, so I could set its x position and then all the elements in that…
ChrisInCambo
  • 7,767
  • 15
  • 47
  • 63
214
votes
7 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,337
  • 16
  • 39
  • 68
210
votes
13 answers

How to calculate the SVG Path for an arc (of a circle)

Given a circle centered at (200,200), radius 25, how do I draw an arc from 270 degree to 135 degree and one that goes from 270 to 45 degree? 0 degree means it is right on the x-axis (the right side) (meaning it is 3 o' clock position) 270 degree…
nonopolarity
  • 130,775
  • 117
  • 415
  • 675
206
votes
15 answers

jquery's append not working with svg element?

Assuming this: