Hot answers tagged

187

To prevent possible rendering artefacts. Without the notches you're likely to see the edges of the bottom shapes where they meet the edges of the overlaying shapes (on screen anyway, it's not really a problem when printing). You can see examples and explanation of the possible artefacts here: Image looks embossed when converted to SVG How to put one ...


72

As Wrzlprmft has already pointed out, over 50% of your SVG file's size is taken up by an embedded PNG bitmap image used to create a fairly subtle shading effect on the controller. Just getting rid of that image, and replacing it with a simple radial gradient, is enough to shrink the SVG down to about 10kb.               ...


42

Understanding rasterization and the painter's algorithm might help. One way of rendering vector graphics (graphics defined by polygons, instead of pixels) to pixels is to rasterize the polygons while running the painter's algorithm. The painter's algorithm is a bottom-up process where you first put down the background, they draw on top of that background ...


37

What I ended up doing is the following: Select the object(s) to export Open the document properties window (Ctrl+Shift+D) Select "Resize page to drawing or selection" File > Save As Copy... Select Optimized SVG as the format if you want to use it on the web Not as quick as I would like but quicker than creating a new document for each graphic that you ...


35

Your SVG contains an embedded pixel graphic for the shade in the bottom right of the controller. This is responsible for about ⅔ of the file size. If you remove it, your SVG file is en par with your JPEG. You can probably achieve an adequately similar effect with a gradient. Other techniques of reducing SVG file size include: Remove all Metadata and ...


28

Cai is correct. I thought I'd add a visual answer as well. The reason this happens is that it's an SVG. Unlike a raster image where you control each rendered pixel, the rasterization of the SVG happens in the browser...so the browser makes these decisions. One of the decisions the browser has to make is when to do anti-aliasing. It will typically do this ...


27

I am a little surprised no-one has mentioned the "Scour" extension. It's bundled with Inkscape (as of v0.47), and does many of the optimisations mentioned by Ilmari Karonen.


25

Make sure your design is entirely composed of paths. There can't be any groups or text objects, etc. Ok to have multiple path objects though. Draw a rectangle around the whole thing Select your design as well as the rectangle Choose "Path" > "Exclusion"


22

I've run into this problem several times, and the only thing that has ever worked for me to reliably reset the SVG viewbox to precisely 0, 0 when exporting from Illustrator is to create a new blank document and copy and paste the artwork into it. The top left corner of this untouched default artboard will export as point 0, 0 of the view box. Use smart ...


22

They are called conflation artifacts, if you want to see how different vector engines react see here. If you want to understand the technical reason for some discussion see here. Basically conflation happens because we convert coverage to opacity, and that does not work. If you were to skip coverage based anti-aliasing then you wouldn't have any conflation ...


22

Designing at 100% scale just means designing at the size (in pixels) that you will be displaying/outputing your icon at. If you are designing a 24px × 24px icon, you set up your artboard in Illustrator or document in Photoshop or whatever else you are using to 24px × 24px. As quoted from the Material Design guide, this is for pixel accuracy. If you work at ...


19

An .SVG file IS a source file. It isn't layers in the Photoshop/Gimp sense but it absolutely can be picked apart. Use an SVG editor - that would be Illustrator or Inkscape. Alternatively, if you want to get real crazy you can open the .SVG in any text editor and look for the values you want to change which for colors would be in Hex format #nnnnnn


18

You embed fonts in CSS by using base64 encoding. You can apply styles in SVG documents similar to CSS by using a <style /> element. So if you have a WOFF font, you'd embed it like this: <style> @font-face { font-family: "Sample font"; src: url("data:application/font-woff;charset=utf-8;base64,..."); } </style> Where ... is the ...


16

The trick is to turn the path in to a Compound Path (CMD + 8). That makes the SVG output an actual path rather than a primitive type.


16

With a bit of boolean operation trickery this is a pretty easy process. Just take a set of the hexagons you have there, create a rectangle that matches the orange one I've got in the image above (make sure the corners snap to the appropriate points on the hexagons), and then use the intersection tool to get rid of everything outside of the rectangle. That ...


15

SVG is scalable, if you have a vector-graphic that is a clear advantage. For pixel-graphics PNG is better. A downside is, that the Internet Explorer supports SVG only with the coming version 9 (before with plugin). Mobile browsers may also have limited support for SVG. EDIT: As ClemDesm points out, older IE-versions don't support fully transparent PNG, ...


15

You can set the artboard to match the outer dimensions of any object by selecting the object and choosing Object > Artboards > Fit to Selected Art from the menu.


14

A lot of this answer is also posted in this related question on how to animate illustrations for the web. Avoid SMIL animations Sara Soueidan, probably the best animator of SVGs on the web, wrote "I know I wrote the guide to SMIL animations but, seeing their future, I don’t personally use them anymore." You shouldn't either. SMIL animations don't work ...


13

The simple answer here is use both. The fact that you've named SVG as an option, means we can rule out photo graphics as an intended use case - because SVGs are only good for line-art graphics such as logos, icons and clip-art-like illustrations. If you are considering this choice for photo graphics, there is no choice; PNG will probably always be better. ...


13

Yes there is. Obscure question but I was till able to google it. Here is how you do it. If your path is open: Select the pen tool (P) Click the last anchor of the path. The order will be reversed If your path is closed: If the path is a compound path, skip to step 4 Select the path with the Selection Tool (black arrow, V) Click on menu->object->...


12

If you want to be sure that the text will have the same appearance in every case - First, you can Expand the text before saving as svg Second, in font part of saving dialog you can press "convert to outline"


12

The development version of Inkscape (upcoming 0.91 release) has a global anti-aliasing toggle in the Document Properties window, which should also work for export. Look for "Development Versions" on the download page: http://www.inkscape.org/en/download/


12

Printing in multiple colours requires accurate registration to avoid unsightly gaps and is a concern when artifacts are composed from multiple sources. Similar concerns can occur even in digital products where limited precision arithmetic necessarily introduces error. The problem being avoided is one of inverse trapping - where deviation from the intended ...


11

It's possible. Select your object Call "Attributes panel" Cmd/Ctrl + F11 In dropdown "Image input" select "Polygon" Paste your link in input "URL" Export svg Check in browser Profit


9

I would say PNG simply for the fact it seems to be a more accepted format than SVG.


9

Select both (by clicking one object, holding shift, then clicking the other object), then select Path, then Difference. For me, I wanted to cut a left arrow out of a hexagon. I created a hexagon, duplicated the layer, shifted the top layer to the right, then selected both layers, then PATH / Difference.


8

This might not be the answer you're expecting, but for the web, it's not truly needed to use any SVGZ files. The reason being is that a SVGZ file is simply a SVG that has been pre-Gziped. Modern web servers can do this Gzipping themselves before serving the asset (see this answer on StackOverflow for more info), so if you have a 300KB SVG that is 50KB when ...


8

Illustrator started as a professional print-only application. It was made for professionals creating pieces designed to be fed to an imagesetter and put on press. It was a print production tool and really not much more. There was no internet when Illustrator was created. No mobile devices. No UI development to really speak of. So, Illustrator was built on ...


8

Not sure I 100% understand your question, but sounds like you have many icons and only need one...? Just create a new document in illustrator. Copy over the icon you need. Select the icon, then choose File > Document Setup > Edit Artboards Then in the top left choose Presets: Fit to selected art. Then save as an .svg If there are other icons/objects in ...


8

I'd send them some combo of: EPS (the 'traditional' format. Most useful for printing) PDF (the 'replacement' for EPS) SVG (open source vector file format) PNG (raster based image--useful for web)



Only top voted, non community-wiki answers of a minimum length are eligible