Question about Scalable Vector Graphics; a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). Ask anything related to designing graphics for the SVG format.

learn more… | top users | synonyms

4
votes
1answer
2k views

How to convert a gradient mesh created in Illustrator into a browser-compatible, scalable SVG?

I need to convert a gradient mesh generated in illustrator into an SVG file that is browser compatible. The mesh generates this gradient which I need to use as a background for a responsive web site ...
4
votes
1answer
5k views

How to create Android PNG Icons from an SVG using GIMP

I'm pretty much a graphics design noob, as you can tell by this very basic question. What I am trying to achieve is to create a set of Android icons from an SVG file that I have. In case you didn't ...
4
votes
2answers
1k views

Why are my elements moved after being exported to svg

I'm quite new to Adobe Illustrator, but used to PS. I wanted to experiment with Illustrator to create SVGs that can than be manipulated with JavaScript. I created some kind of background-layer and ...
4
votes
2answers
10k views

How to export to SVG from Illustrator using Artboards

I am designing some icons. To keep the proportions correct, I designed all the glyphs in one artboard. Now, I want to experiment a little with SVG icons, so I want to export these icons to different ...
4
votes
1answer
537 views

Is there any way to set fallback font-families in Illustrator SVG?

I'm trying to set up an action that creates versatile text-containing SVG files which can be used in various places including Wikimedia Commons. The only problem is, Wikimedia Commons only supports a ...
4
votes
3answers
987 views

How to exclude hidden shapes when saving to SVG

Im trying to save icons out to SVG format, one at a time, but from one document. what i mean is, i have all my icons laid out in one document, and once i am ready to save them, i will move the icon i ...
4
votes
1answer
1k views

Copy, paste, move colored squares - but keep them aligned to the grid

I am developing a word game for iOS and would like to use an SVG file as the gaming board. The SVG file (author: Denelson83, Wikimedia Commons) is almost perfect for my game - except for displaced ...
4
votes
2answers
2k views

Animate Drawing of SVG Text

I've had some background mostly in pixel-based graphics and web design. However, I've never came across SVGs. A Google search for this problem convinced me that the answer might be to use SVG for the ...
4
votes
2answers
2k views

How to correctly using potrace (CLI) to trace bitmap

I was trying to vectorize a .png. I found a utility (which is incorporated into InkScape), the potrace. If any of you knows how to use potrace, kindly teach me the right way to get sharp output. ...
4
votes
1answer
1k views

How does Inkscape decide whether to use flowRoot or text?

The program for which I'm creating svg doesn't display text that I create in Inkscape where Inkscape saves the text as flowRoot. When does Inkscape choose to use svg:flowRoot? Is there a way to tell ...
4
votes
2answers
2k views

Best way to save AI/SVG graphics for website purposes?

I'm using Adobe Ilustrator CS3. I have a bunch of small images (200x200 px) which I originally created as ".ai". I saved them as ".svg" using option Save for Web & Devices but to my surprise the ...
4
votes
1answer
1k views

How to split an SVG file with dozens of g elements into dozens of SVG files?

I have an SVG file that has, say, 10 g elements that do not start at (0,0). For example: <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.1, SVG Export Plug-In . ...
4
votes
4answers
1k views

Can I make each group in this SVG file its own SVG file?

I have a huge SVG file that I filled with all the characters for a font. There are a lottt of characters and it'd take forever to manually copy each of them into its own file. Each character has all ...
4
votes
1answer
434 views

How to create an SVG path from a lineart?

I have a line drawing in PNG format, from which I need to create an SVG. I need to create the svg path from right to left, left to right, center to sides OR sides to center. Here’s an example: I’m ...
3
votes
1answer
728 views

Why does Illustrator struggle editing SVGs?

I really enjoy editing vector graphics. Typically I use Inkscape for editing vectors because Illustrator seems to throw so many errors when reading the files. I understand that an SVG is basically ...
3
votes
5answers
7k views

How do I use an SVG “icon font” within Illustrator?

Trello uses an icon font and I'd like to figure out how to bring in some of the glyphs into an Illustrator project. Admittedly, this is going a bit backwards (usually you want to import Illustrator ...
3
votes
3answers
297 views

Convert PNG pixel arts to SVG without tracing

For a personal project, I designed some icons as PNG files and would like to export them as SVGs. I know the next question: I don't want a raster, I need vectors. I found this question but since it's ...
3
votes
2answers
2k views

Why do EPS (vector) file formats require a specified resolution?

SVG is also a vector graphics file format but I've never been requested for resolution choice when using Matlab or Inkscape. EPS however has these options. Why? If both are vector graphics formats, ...
3
votes
1answer
357 views

How does one extend arrows in SVG?

I would like to be able to lengthen (without changing their direction, colour, width or the dimensions of their heads) arrows between cells in this diagram, ...
3
votes
3answers
3k views

Quality Loss When Scaling down SVG's

I'm having a hard time trying to find the best way to produce an SVG that maintains it's quality through scaling. The actual size of the image is the medium one which is pixel-perfect in Illustrator. ...
3
votes
3answers
10k views

“Select by color” and “draw path from selection” in Inkscape?

I imported an image to Inkscape. Now I'd like to select all those regions that have the same (or to a certain degree similar) color. From this selection I'd like to draw a path (to which I can add a ...
3
votes
4answers
2k views

export multiple Inkscape SVG files to multiple PDF files

I have a number of svg files created in Inkscape. I would like to know if there is an utility where I can export all the svg files into multiple pdf/png files. I have around 150 such svg files. The ...
3
votes
3answers
566 views

What would you use as an icon to represent social media?

Ok, So I have a website I'm working on that uses 7 social media websites (facebook, twitter, g+, youtube, pinterest, instagram and tumblr) plus the rss icon. Rather than plaster them on the website ...
3
votes
1answer
83 views

Some items in SVG drawing are showing up as question marks in various Mac OS apps, and Inkscape [closed]

I have an SVG drawing that has some little trees in one section of it. Up until recently it was all fine, but the latest version of it that was emailed to me recently has a really weird problem. ...
3
votes
1answer
65 views

Animated SVG Javascript Infographic for timeline

I am considering to make an animated infographic based on SVG, Javascript and CSS technologies of a timeline. I have lots of experience in programming but not so much in using these technologies to ...
3
votes
2answers
139 views

SVG optimization practices when drawing in Illustrator

I’ve noticed that when exporting a file from AI to SVG, there is a lot of code created that is not necessary and I realized then that this code can be certainly optimised. Found this interesting SVG ...
3
votes
4answers
524 views

Generate/Extract for Illustrator?

Is there a way (plugin, add-on, etc) to export assets from Illustrator the way one does with Photoshop Generate? I'm finding myself spending a lot of time meticulously separating everything into many ...
3
votes
1answer
450 views

SVG images for JavaFX-based game client

A group of programmers and designers are making a Trading Card Game (TCG). I work mostly on creative material. The Java game client is using JavaFX for GUI and we are looking to use primarily ...
3
votes
2answers
762 views

Long Shadow Effect in SVG for Web

Basically I'm wondering if anyone has any ideas on how to efficiently get a long shadow effect with an SVG: Example Image My three ideas on how this might be possible: Hella detailed gradient map, ...
3
votes
1answer
621 views

How can I create paths with accurate border-radii

So I'm getting a little confused with radii in Inkscape. For quite a while I thought that this: was the same as this: ... But it turns out that overlaying them on top of one another reveals that ...
3
votes
1answer
2k views

Get rid of thin white lines between shape 'joins'

I've created an icon made out of basic lines/shapes in Adobe Illustrator, then make it one solid, continuous shape. I want to use this icon as a pre-loader on a website, the idea being each 'segment' ...
3
votes
1answer
179 views

Quality of text in PDF and SVG

I'm converting pdf files to svg as it is easier to use svg files on webpages. I first thought the quality of svg must be similar to pdf, as they are both vector graphics. However, now I look a ...
3
votes
1answer
2k views

How can I keep the font-width consistent in SVG across different operating systems and browsers?

I'm trying to add some text to a SVG file. The text is dynamic and shown over a rectangle which acts as background. Since the text is dynamic, the width of background rectangle also needs to be ...
3
votes
3answers
80 views

How can I avoid auto-adjusting of the text dimensions in Inkscape?

When I create a text object in Inkscape, it automatically clips it and adjusts the dimensions of the object so it occupies as small area as possible. This might be useful in certain cases, but in many ...
3
votes
1answer
208 views

Illustrator CC 2014 - SVG coordinates keep shifting position

I'm using Illustrator CC 2014 to create a sprite sheet for use on the web. The artboard and icons are 16px wide. My problem is, the positions of the icons seem to shift, and I can't figure out why. ...
3
votes
3answers
3k views

Export SVG function in Fireworks only creates outline

There's a pretty big problem I'm having with Aaron Bealle's Export to SVG script in Fireworks: So I have a path in Fireworks that I created from a marquee selection (which came from the magic wand, ...
2
votes
2answers
1k views

How to create a vector curve programmatically?

I want to create a vector curve that is symmetric in the top and the bottom. For example, in this baseball icon (How to draw a baseball in Pixelmator?), if I try to write the vector as suggested by ...
2
votes
2answers
1k views

License that allows me completely free commercial usage of images

PROBLEM: I need free images for my application. They are intended for controls ( main window / buttons / treeview icons ... ). MY EFFORTS TO SOLVE THE PROBLEM: Searching through Internet, I was ...
2
votes
3answers
1k views

Separating one element of an Svg file into multiple elements with Inkscape

I want to edit an svg from wikimedia commons that shows the human arteries to highlite a specific artery in a specific color. Unfortunately multiple arteries in that svg are represented by the same ...
2
votes
2answers
13k views

How to convert an Illustrator EPS to SVG and keep alpha channels and transparency modes?

I have an Illustrator EPS file which has a number of shapes that are set to multiply and overlay modes. I am also using a number of masks. Is there a way to export this art in SVG format and keep all ...
2
votes
2answers
3k views

How to create a 3D effect in Inkscape as required by the Android Design Guidelines?

In the Iconography section if the Android Design Guide they describe the following style that should be used for Launcher Icons: Use a distinct silhouette. Three-dimensional, front view, ...
2
votes
4answers
7k views

Using inkscape to convert scanned color drawings to svg — recommended or no?

I'm an ebook publisher trying to include 10 color illustrations inside an ebook. It's not a fixed layout ebook but a reflowable ebook (i.e., an epub). Graphic example here: ...
2
votes
2answers
690 views

SVG to bitmap converter that doesn't generate horrible bitmaps

I've been using Inkscape to generate PNG's from various SVG files. This works fine for larger images, but for smaller images (like icons), bitmaps appear grainy and extremely anti-aliased at the ...
2
votes
1answer
54 views

Inkscape: why do coordinates in GUI and XML differ?

In the drawing below I have e.g., a rectangle. In the GUI, Inkscape says the rectangle is at Y position 0, but in the XML for that element it says 873. Why is that and how do I get the "real" ...
2
votes
2answers
491 views

SVG looking bad in small resolution?

I've cretaed a SVG image trying to solve the quality problem when re-sizing the element or scaling it through CSS. To my surprise, my SVG image looks even worse than the reduced size of the GIF or ...
2
votes
2answers
996 views

How does pixel hinting work?

In this question, a user asks how he can create a vector image that scales down smoothly. Pixel hinting is the solution: Anti aliasing treats every edge like a nail, smashing and smoothing ...
2
votes
1answer
234 views

What is the best practice for laying out and exporting custom icons from AI?

I'm working on creating completely custom icons with AI and essentially exporting them out as an individual svg icons to be used in our app development. I have been experimenting with different ways ...
2
votes
2answers
6k views

Cropping SVG files

How do I crop SVG files I created used MarvinSketch? Now I realise there are a few answers to this question like this one Getting rid of Whitespace in Inkscape but I've done that and it didn't work as ...
2
votes
1answer
2k views

Can I globally change colors in an SVG using illustrator?

I have an SVG graphic in illustrator. I want to replace colors, everywhere in the illustration, with different ones. Could I operate the color swatch to make the change? I'm looking for a global ...
2
votes
3answers
455 views

Add imperfections to vector graphics / drawings

I'm looking for creative ways to add imperfections or flaws to my vector graphics in order to make them appear more like hand drawn sketches. I'm working with Inkscape so tips that work here are very ...