Hot answers tagged

238

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 object ...


139

A straight-forward method is the following: Select the object(s) to export. "Resize page to drawing or selection" (File → Document Properties) or Ctrl+Shift+R. "Invert selection" (Edit → Invert selection) or !, and Del all other objects. "Save As" with Ctrl+Shift+S. Select Optimized SVG as the format if you want to use it on the web. Not as quick as I ...


79

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.               ...


64

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, then draw on top of that background ...


52

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.


51

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 ...


49

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 ...


44

You are correct--that "checked background" is how many programs indicate transparent areas. SVG files have a transparent background. Changing the background color is not part of the SVG standard, so changing the background color in Inkscape won't carry over to the SVG file when its viewed in a browser. There are a few ways to get a solid background color: ...


43

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.


42

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"


40

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 ...


39

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"


35

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 ...


32

A command line solution: Export your SVG master.svg to PNG with Inkscape: # Install on Ubuntu sudo apt-get install inkscape # Other systems: make sure Inkscape is in your PATH inkscape -w 16 -h 16 -e 16.png master.svg inkscape -w 32 -h 32 -e 32.png master.svg inkscape -w 48 -h 48 -e 48.png master.svg Convert the PNG images to ICO with ImageMagick: # ...


29

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.


29

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.


28

You can use ImageMagick right away: convert -density 384 icon.svg -define icon:auto-resize icon.ico


25

Select Both and Do: Object --> Clip --> Set


24

Yes there is. 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->compound path->make. The path will be turned into a "compound path" Open ...


23

I keep another instance of Inkscape running on the side and just copy-paste the object I want to save into the scratch document, then save. Another option if you just want the path data is to select the object, Shift+Ctrl+X to open the XML editor, grab the pieces you want (usually the d attribute), then paste to wherever.


23

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 ...


22

You can run this code on your javascript console: var e = document.createElement('script'); e.setAttribute('src', 'https://nytimes.github.io/svg-crowbar/svg-crowbar.js'); e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); or use this bookmarklet. Worked perfectly for me:


21

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 ...


21

Inkscape uses mm as the default display-unit or user-unit for your document. User-units are used to store values in the SVG file. <svg width="100" height="100" viewBox="0 0 26.458333 26.458333"> This tag describes a drawing size of 100px x 100px. The viewBox attribute defines that 100px x 100px is equivalent to 26.458333 x 26.458333 user units. The ...


18

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. ...


18

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 in ...


17

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/


17

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 ...


16

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


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