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
367
votes
22 answers

Unable to import svg files in typescript

In typescript(*.tsx) files I cannot import svg file with this statement: import logo from './logo.svg'; Transpiler says:[ts] cannot find module './logo.svg'. My svg file is just .... But in .js file I'm able to import it without any…
AngryBoy
  • 4,627
  • 2
  • 15
  • 10
353
votes
14 answers

How to prevent an HTTP request just for a favicon?

Everybody knows how to set up a favicon.ico link in their HTML: But it's silly that for only a several-byte-tiny icon we need yet yet another potentially speed-penalizing…
Sam
  • 15,254
  • 25
  • 90
  • 145
351
votes
17 answers

How do I center a SVG in a div?

I have a SVG that I am trying to center in a div. The div has a width of 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). Does Anyone know…
Don P
  • 60,113
  • 114
  • 300
  • 432
344
votes
11 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
  • 3,595
  • 2
  • 16
  • 14
312
votes
13 answers

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

I have the following code:
Samantha J T Star
  • 30,952
  • 84
  • 245
  • 427
308
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
  • 7,908
  • 11
  • 52
  • 70
302
votes
15 answers

jQuery SVG, why can't I addClass?

I am using jQuery SVG. I can't add or remove a class to an object. Anyone know my mistake? The SVG: The jQuery that won't add the class: $(".jimmy").click(function() { …
Don P
  • 60,113
  • 114
  • 300
  • 432
275
votes
14 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
  • 3,483
  • 5
  • 21
  • 20
266
votes
15 answers

How to convert a PNG image to a SVG?

How to convert a PNG image to a SVG?
user199337
  • 8,063
  • 7
  • 23
  • 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
  • 14,212
  • 17
  • 56
  • 69
254
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
  • 8,455
  • 15
  • 50
  • 63
250
votes
16 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
  • 146,324
  • 131
  • 460
  • 740
248
votes
10 answers

What is the easiest way to use SVG images in Android?

I have found a myriad of libraries in order to use SVG images in Android and avoid the frustrating creation of different resolutions and dropping files for each resolution. This becomes very annoying when the app has many icons or images. What would…
CommonSenseCode
  • 23,522
  • 33
  • 131
  • 186
244
votes
10 answers

Include an SVG (hosted on GitHub) in MarkDown

I know that an image can be placed in an MD with the MD syntax of either ![Alt text](/path/to/img.jpg) or ![Alt text](/path/to/img.jpg "Optional title"), but I am having difficulty placing an SVG in MD where the code is hosted on GitHub. Ultimately…
chris Frisina
  • 19,086
  • 22
  • 87
  • 167
241
votes
27 answers

Removing transforms in SVG files

I have been struggling with this for a while, and can't seem to find an answer (that works) anywhere. I have an SVG file which looks like this:
Ephemera
  • 8,672
  • 8
  • 44
  • 84