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

5
votes
1answer
226 views

How do I overcome this PNG rendering problem of a SVG?

I uploaded a human body diagram showing the signs and symptoms of Hodgkin's lymphoma (http://health-and-medicine.wikia.com/wiki/File:Symptoms_of_Hodgkin_lymphoma.svg) to my Wiki but for some reason in ...
5
votes
1answer
126 views

Multilingual SVG for the web

Is there a way to create multilingual SVG files for the web? I have an SVG with text that I use on a website. Now if the user changes the language on the website I should normally create a new ...
4
votes
3answers
877 views

TTF and other “modern” font systems, and font size differences

I have no formal (and precious little informal) graphic design training. Fairly famous Computer Science person Dr. Donald Knuth long ago developed a font description system called Metafont. In and of ...
4
votes
3answers
6k views

Import vector data into illustrator

I have a program that generates thousands of vector points (just coordinates), the format is not fixed, but it could be something like this: (2.4785|77.01) (78.8|9.88) (45.33|0.2) I am able to ...
4
votes
1answer
9k views

Add a hyperlink within Illustrator [duplicate]

Is it possible to add a hyperlink to an object or a layer within Illustrator CS6 for a later SVG export? I know about the possibility to manually edit the exported file and wrap elements with an ...
4
votes
3answers
6k views

How to export .svg file from Adobe Illustrator with shape IDs?

My question is very simple. How to export an SVG file from Adobe Illustrator with shape IDs? When I export as SVG my group names turn to groups with group name as ID, that's the behavior I would ...
4
votes
3answers
13k 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
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
6k 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
2k 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
174 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 ...
4
votes
1answer
613 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
1k 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
3k 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
3k 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
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
525 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 ...
4
votes
3answers
124 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
827 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
2answers
15k 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 ...
3
votes
5answers
8k 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
408 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
3k 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
2answers
1k 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 ...
3
votes
2answers
4k views

how do I import a vector path from Inkscape into Gimp?

I'd like to take an SVG clipart, pull out particular paths from it, and bring them into Gimp and use them to create selections and/or to stroke. Nothing I've tried seems to work -- even though Gimp ...
3
votes
1answer
429 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
4k 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
12k 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
1answer
39 views

Saving image files with maximum compatibility for different displays?

There's a website I'm working on where students can read their textbooks online, page by page using an implemented PDF viewer. But I've noticed that this doesn't look particularly great on different ...
3
votes
4answers
9k views

When I save as .SVG it adds extra whitespace width to the document

I have my image on the artboard and have clicked Object > Artboards > Fit to artboard bounds. When I save an SVG I get extra whitespace at the bottom, how can I just save whats in the ...
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
1k 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
2answers
7k views

How to export Animated SVG file from Adobe After Effects?

I am working on a text animation in Adobe After Effects and I want to export my animation as an Animated SVG so that I can use it on my website and Mobile Apps. Does anyone know how to do that?
3
votes
1answer
114 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
4answers
1k views

SVG export from Illustrator CC distorts paths

I'm trying to create some icons to add to the Glyphicons library. I've created them using the pen tool (shapes) in Adobe Illustrator CC, they're ultra-basic. As PNG, or EPS they export fine. ...
3
votes
4answers
2k views

Saving an SVG with viewbox 0 0 in Illustrator

I've got a problem saving SVGs in their correct format in Illustrator. I want to save an SVG for web development with the viewbox as "0 0 100 100". The sizes, 100 width and height, are not a problem. ...
3
votes
1answer
153 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
4answers
1k 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
521 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
897 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
719 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
4answers
103 views

Split a path into two separate paths in InkScape

I have a monochrome drawing of a face done in SVG. The entire face is one path. How do I for instance select just an eye and make it into a second separate path? Thanks. Note that the eye is just ...
3
votes
1answer
105 views

Weird lines in svg in browser which are not visible in AI

I'm trying to create a simple vector graphic for a bar. It looks as I want it in AI but gets some weird lines in browsers. Please take a look at the picture and let me know if you know what can be the ...
3
votes
2answers
43 views

How do I allow " to render rather than &quot; in inkscape?

I am developing a tool that will take Inkscape made SVG files. I want to make it so I enter various tagings like {{="test this"}} And my renderer, made it myself, would then replace the item with ...
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
188 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 ...