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

3
votes
1answer
259 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 ...
9
votes
2answers
6k views

Tool to create animated SVGs?

Are there any graphical tools to create and edit animated SVG images? Inkscape is great, but it does everything except animation. I created an image in Inkscape, then manually edited the XML to add ...
4
votes
1answer
1k views

Why are some SVG Filters automatically converted to PNG when creating an SVG in Adobe Illustrator?

I was wondering why some of the SVG Filters found in Illustrator are automatically converted to PNG when I export the entire file to SVG. I don't want any hidden PNG files because of scalability. To ...
1
vote
0answers
47 views

How can I improve my Inkscape results? [closed]

Using Inkscape for text produces an outline letter and then at the end of the drawing each letter is then filled. How can I simply improve my results?
19
votes
4answers
13k views

How do I embed Google Web Fonts into an SVG?

I'm writing an article on my site about the advantages of new web technologies, among others HTML5, CSS3 and SVGs, one of the advantages of the latter being the ability to select text in what is ...
2
votes
2answers
136 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 ...
4
votes
3answers
417 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 ...
12
votes
1answer
1k views

Is it possible to “invert” an SVG file? Not the colours, but the actual areas/paths?

I have an SVG file, and I want to create the opposite of it. It's a monochrome icon, and I want a version where the logo is transparent and the rest of the rectangle is filled paths. In theory it ...
5
votes
4answers
8k views

Photoshop layers into SVG paths

I have a set of Photoshop files which consist of a base image with a series of layers with colored overlays. The overlays are labeled using the layer names. My task is to get these overlays as SVG ...
6
votes
1answer
790 views

Illustrator CS6 Data Variables XML Parser Error

So I have to generate flyers for 10 different laptops (and more in the future). I decided to set up variables. I've created an XML Map for MS-Excel which allows me to save the 'XML Data' type file. I ...
1
vote
3answers
1k 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 ...
0
votes
0answers
36 views

How to import SVG icons to Sketch so that they don't overlap and placed in order?

I've downloaded an icon set which has a folder containing SVG icons. When I select and drag the SVG files into Sketch, all icons are placed very close to each others so I'm ordering all of them by ...
1
vote
4answers
188 views

How do I copy icon designs from Photoshop to Illustrator in order to turn them into .svg?

I'm a newbie in creating font icons from .svg. I created some icons in Photoshop (.psd), and now I want to copy all of them to Illustrator to create an .svg file but I don't know how to do it. Can ...
2
votes
2answers
137 views

Does SVG supports complex logos?

I have created a complex 3d style logo with transparency and other effects in adobe illustrator and later save as SVG file format. However, due to complexity of the logo illustrator or SVG failed to ...
1
vote
1answer
98 views

How do I make SVG files more transferable from Inkscape to Illustrator and viewable in Chrome?

I've created a SVG file in Inkscape [1] and I've noticed that viewing it in Chrome or Illustrator causes a number of parts of the diagram to be invisible or otherwise poorly rendered (e.g., in Chrome ...
1
vote
2answers
164 views

Exporting from Illustrator causes a weird path effect

When I use the image trace feature in Illustrator I'm able to create a pretty high quality vector of an image. However, when I export it as an .svg file the paths aren't "just right" and it causes you ...
0
votes
1answer
47 views

Object getting displaced while animating - SVG

I am trying to animate an image along a path in SVG. The object does get animated along the defined path but away from its intended position. I am not able too see as to what's wrong with the code. ...
2
votes
3answers
1k 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 ...
0
votes
1answer
52 views

How to create an inverse path

I've got an svg in Illustrator, build from 3 paths. I want to create a path that is the complete inverse of the current paths. So everything that is transparent now - I want it to be white and the ...
0
votes
2answers
58 views

Circular Bend Shape

I'm going to try to replicate this tutorial on creating a wobbly slide show but instead of a square svg, I am trying to use a circular shape. The square image is comprised of the below: What ...
0
votes
1answer
56 views

Which SVG features are supported by Illustrator? [closed]

I've noticed that certain SVG features such as @font-face w/ base-64 content and path fill styles do not seem to work with Illustrator. (SVG image not displaying CSS base-64 data URL encoded fonts in ...
1
vote
0answers
118 views

SVG image not displaying CSS base-64 data URL encoded fonts in Illustrator

I'm dynamically generating an SVG that includes text and a font using an embedded base-64 font-face with this method: How do I embed Google Web Fonts into an SVG? <defs> <style> ...
4
votes
4answers
15k views

How to remove the background of an SVG with Adobe Illustrator?

I found a royalty free SVG image on the net. I'm experimenting with web design using SVG. The problem I'm having is that the SVG background is white. How do I delete / remove the white background, ...
1
vote
1answer
122 views

How to create a vector (SVG) with XML Code?

I recently saw an icon on the web, a stepper motor image: but when I click "View image" it sends me to the page ...
5
votes
3answers
8k views

How do I use a custom font in an SVG image on my site?

I created a custom Facebook icon using Inkscape and saved it as an svg. It uses the same font as the title of my page, which uses the font "ubuntutitling-bold-webfont", which I have referenced as a ...
1
vote
3answers
92 views

Why is this font damaged in SVG?

I have a logo which has a symbol and some text. The stroke on the text is about 15px, so nice and fat. When I use it as an SVG image in a page, it works fine, except that when I increase the size, ...
1
vote
1answer
100 views

Saving AI to svg

I created some art with a Rectangular grid tool. I created the shape, converted to a live paint and started my pixel art. As I was done I tried to save it to SVG but when you open the image, it ...
0
votes
0answers
81 views

import psd as text into illustrator

I have a psd file with picture and text, that I am trying to convert to svg - so the text will be scaleable. I am working with cs5. I believe you can export as svg from photoshop-cc now, but I dont ...
0
votes
1answer
36 views

How does the P1 translation column horizontal shift (and other fields) work?

I really like Inkscape and I enjoy doing things in it, but even after using it for a while I have to say that many functions are obscure and counter intuitive (like the gradient editor). My current ...
1
vote
0answers
98 views

Shading an SVG shape using control points

I'm using Inkscape to produce an SVG image which is supposed to reproduce a photo. I have some arbitrarily drawn shape, and I need to shade it. Here's an example photo: Here's how I would like to ...
-1
votes
1answer
803 views

SVG not rendering in Safari

I have several pages on my site that show SVG images on any browser without a problem. One of the pages shows two different SVG images, and one of them is a pretty complex image. In my Chrome Web ...
4
votes
1answer
142 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 ...
11
votes
2answers
22k views

How can I edit an .SVG file?

Wikipedia has an extensive set of anatomy SVGs, but I can't highlight different organs or parts dynamically, because there are no source files with layers I can manipulate in Photoshop or GIMP. How ...
2
votes
1answer
200 views

What's the best approach when designing website/app UI icons in Photoshop?

As the title says, I would like to know what's best to approach when inserting/using an icon when designing website/app UI. Should I insert it as a “smart object”, font-based icon, or vector mask? ...
0
votes
0answers
26 views

How to draw into tiled space?

I want a pen that draws at 9 points spaced in a grid spaced about 90% of the page. In svg or similar vector format. The idea is to be able to make nice tile-able drawings. I have tried photoshop, ...
0
votes
0answers
117 views

SVG to EPS in Inkscape and jagged edges

I have a simple logo comprised of an outer ellipse, an inner ellipse and lastly text inside that. The ellipses have only a fill, no stroke. The text is converted to a path. It is drawn on a 3508x2480 ...
3
votes
1answer
2k views

Specify CSS class names on SVG paths using Illustrator

Is there a way to edit SVG files in Illustrator where you can specify a CSS class for each path? I already know in Illustrator that if you give the layer name an actual name, Illustrator will use ...
3
votes
2answers
885 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 ...
1
vote
2answers
309 views

SVG files render differently in browsers - typography

I have a problem with svg backgrounds that render differently in browsers.In Chrome the letters are correctly gill sans light and two words are bold. That's not the case in Firefox. How do I fix this, ...
1
vote
1answer
54 views

Strange ID when save a file as SVG in Illustrator

I drew a map of a floor with offices in Illustrator, and I need to named each office floor. But the names have numbers or special characers such () and +, i.e. 360 (IVO+IMR+IEC) And when I save it as ...
1
vote
0answers
97 views

Is there a tool that converts Adobe Illustrator's 3D Rotate effect to SVG or CSS transforms?

I'd like to export a graphic as SVG, and it contains text that has a 3D Rotate effect applied to it. Saving as SVG this expands my text to outlines :( I'd like it instead to output <text> ...
0
votes
2answers
108 views

Predefined SVG paths for character forms

In order to avoid to align more than 100 circles manually I'd like to automatically align them on a path which has the form of a character. Can I find predefined paths somewhere for those characters? ...
15
votes
2answers
14k views

Exporting an object as svg from inkscape

I know that Inkscape does not have the ability to export selected objects as svg, but is there a workaround that people have found that works?
8
votes
2answers
125 views

Do SVGs have any inherent px size?

Im saving some images from my illustrator file as SVGs to use as background images for a website. I know you can set the image size in px but does it have any inherent px size set in the file?
1
vote
1answer
248 views

Why are gradients and opacity rasterized when saving SVG's in illustrator?

I'm a web designer and frequently use illustrator to create graphics for use on the web. The most ideal format for me is SVG because it is light, performant and looks HQ at any size. Something ...
0
votes
0answers
24 views

How to snap images to artboards?

I am trying to export multiple artboards as svgs (with MultiExporter script),but some of the images get cropped,they do not snap to my artboards. I have tried to untag the 'align to pixel grid' ...
1
vote
0answers
1k views

Problems exporting SVGs from Sketch 3

I go to export assets from Sketch as SVG files. I have a few problems... If I select the assets and it automatically slices it, I then save out the SVG file and it gets cut off. circle icon example ...
4
votes
2answers
6k views

Using the shape of an object to cut the object beneath it in Inkscape

I'm editing an svg in Inkscape and I have an object on top of another object. I'd like to use the shape of the top object to cut the object beneath it. For those who are familiar with GIMP, I'm ...
1
vote
1answer
76 views

How do I remove parts of a SVG that aren't on the page?

I downloaded this file from Wikimedia Commons (1) but there's a heap of the picture that doesn't fit on the document page and I'd like to know I can cut what doesn't fit on the page off so that it no ...
1
vote
0answers
101 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 ...