Questions tagged [svg]

SVG (Scalable Vector Graphics), is an XML-based two-dimensional vector graphics format.

Scalable Vector Graphics (SVG) is a markup language for describing two-dimensional vector-graphics images, animations, and applications, and a set of related graphics script interfaces. It was originally an -based format, but can also be included inline in using HTML parsing rules.

The current version is the SVG 1.1 (Second Edition), while SVG 2 is under active development.

Sample

SVG file

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 120 200 200">
  <style>
    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

5 questions
62
votes
5 answers

Why are large amounts of magic numbers acceptable in CSS and SVGs?

Often times I see questions on the Hot Network Questions list like this that basically ask "how do I draw this arbitrary shape in CSS". Invariably the answer is a couple of blocks of CSS or SVG data with a bunch of seemingly random hard-coded values…
5
votes
1 answer

Visitor pattern. Operating on the nodes of a tree

I am working with jQuery like elements from the cheerio library to manipulate SVG images. These objects represent XML nodes and have a hierarchical internal structure. I am writing a function (in JavaScript of course ) that visits each child node…
AdamW
  • 69
  • 2
1
vote
0 answers

Canvas-like drawing interface for SVG?

There's lots of stuff out there comparing the HTML elements SVG and Canvas, but I'm still a little confused. I'm looking for a way to draw an arbitrary shape (like, I have a description of a shape, in coordinates, or in lines and circles, etc.). I…
tscizzle
  • 313
  • 2
  • 10
0
votes
1 answer

How should I prepare my SVG for production?

I have a project in Angular1.x using a lot of SVG files. I have no idea what to do to SVG files to prepare them for production. I don't want my page to invoke 50 calls to different SVG files. So what are my options and which tools do I have to…
guy mograbi
  • 659
  • 8
  • 11
0
votes
2 answers

HTML 5 Double-Helix/DNA

What would be the most cross browser friendly (IE9, Chrome, FF, Safari, Opera) way to code an animated, interactive double-helix? HTML 5/JavaScript is fine. Flash or Java is not. I am unsure if canvas or svg or pure css should be considered as…
Matt Cashatt
  • 3,315
  • 5
  • 24
  • 35