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
11
votes
3 answers

How can I show all symbols in an SVG file?

I have an SVG file, which looks like this:
Bernie
  • 1,607
  • 1
  • 18
  • 30
11
votes
1 answer

SVG file warning message in Android Studio editor

I'm using Android Studio 2.0 with SVG2VectorDrawable: If I open a svg file for edit from the \RAW resource folder, the file i underlined with the red color and a warning message "element svg must be declared" is shown as below: What can I do to…
Seraphim's
  • 12,559
  • 20
  • 88
  • 129
11
votes
4 answers

How to redraw SVG after change from javascript (Internet Explorer and Edge)

Does anyone know how to force IE and Edge to display/refresh embedded SVG after changing its content (see code below) Title
Piotr Antoniak
  • 123
  • 1
  • 1
  • 6
11
votes
2 answers

SVG 'use' tag in Chrome broken

There is SAP (AngularJS and Angular Route) with icon-based navigation made by svg-sprite. So, I hava inline code like this:
11
votes
4 answers

How to change SVG's path color?

Update: Yes, I know there are similar questions on SO, but the solutions don't work either. I want to change SVG's color, I mean paths's color, not a color "inside" but the path itself. I first tried with css, it did not work at all. Then with js,…
konrad_firm
  • 859
  • 1
  • 11
  • 28
11
votes
2 answers

Using android support library 23.2 in build.gradle crashes app (XmlPullParserException: XmlPullParserException: invalid drawable tag vector)

The app is working just fine when using support library v23.1.1 plugin and run under Android 4.4.4 (API 19): compile 'com.android.support:appcompat-v7:23.1.1' compile 'com.android.support:design:23.1.1' compile…
listboss
  • 886
  • 9
  • 12
11
votes
3 answers

SVG disappears if filter is applied

I've been playing around with SVGs in websites, and I've been trying to get filters to work, but I can't seem to get it right. The problem is that the svg disappears completely once I apply a defined filter. I've tried to apply the filter inline,…
Pavlin
  • 5,390
  • 6
  • 38
  • 51
11
votes
2 answers

Firefox svg symbol transform

I am having unexpected behaviour in Firefox while using SVG symbols and position: absolute with transform: translate(); This only seems to be happening in Firefox, not IE or Chrome. I am also reasonably sure I wasn't having this issue previously, so…
Paul Thomas
  • 2,756
  • 2
  • 16
  • 28
11
votes
2 answers

Convert Multipath SVG to Geometry to WPF

I have got some Icons I want to use in my WPF Application, however I need them to be Geometry objects, how would I go about converting the SVG to Geometry, or does Geometry not allow for multiple Paths which make up complex shapes? This is the SVG…
Martyn Ball
  • 4,679
  • 8
  • 56
  • 126
11
votes
1 answer

Why is SVG scrolling performance so much worse than PNG?

A site I'm working on displays a large number (>50) of complex SVG images in a scrolling dialog window. When viewing the site in Chrome, the scrolling performance of the dialog window is very poor - it is noticeably laggy and slow. However, if I…
Nathan Friend
  • 12,155
  • 10
  • 75
  • 125
11
votes
3 answers

Svg polygon rounding

I am working on an application that is using svg move/rotate/zoom functionalities. I'm programming the back-end in Laravel and the front-end is using html/css/javascript. I've seen on the web that is possible for a polyline to have some sort of…
John doe
  • 113
  • 1
  • 1
  • 4
11
votes
1 answer

How to resize SVG clip-path?

I am using an SVG as a mask for an image and I'm trying to resize it. I tried indicating the width & height (to 100) but it still doesn't scale. Just remains the same size. Codepen Demo This is the SVG code:
catandmouse
  • 11,309
  • 23
  • 92
  • 150
11
votes
0 answers

SVG>PNG from canvas.toDataURL throws DOM exception 18 security error in Safari 9.x

I'm creating a dynamically-generated SVG from HTML text content. It works fine in Chrome but Safari consistently throws an error when the SVG data is converted to PNG for downloading. What has me puzzled is that there is no cross-browser stuff…
cbmtrx
  • 591
  • 8
  • 16
11
votes
4 answers

Clip-path doesn't work in firefox [% values]

I am trying to run svg clip-path in mozilla but it doesn't work. .mask-1 { -webkit-clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%); clip-path: polygon(0% 0%, 58% 0%, 39% 81.8%, 0% 81.8%); } It works in chrome perfectly. Can anyone…
user4821826
  • 129
  • 1
  • 1
  • 6
11
votes
5 answers

Create a rounded arrow

I am trying to make an arrow that looks like this: However, this is the closest I can get to it: .button { margin: 4em 0; padding: 2em; width: 15%; margin: 0 auto; text-align: center; background-color: #000000; color:…
Ishio
  • 755
  • 2
  • 9
  • 29
1 2 3
99
100