Tag Info

New answers tagged

0

Solution Found. This is clearly not the best, cleanest most beautiful solution but it works exceptionally well. My Process: 1. Draw the icon in Illustrator 2. Save out as .ai file 3. Open .ai in OSX iDraw 4. Export to SVG from iDraw Simple solution: 1. Draw the icon in iDraw 2. Export to SVG from iDraw I hope this helps other folks out


0

This is a common error in .SVG file .. that's because hard curves (curves made with only two anchors and long handles) this cant not be rendered good by the browser. The best thing to do is to divide your path into smaller segments, specially around the anchor that have the problem. Just go to Object > Path > Add Anchor Points


0

I tend to get the best results from my SVG saves when the coordinates of my objects have clean decimal values. For example, an object at X = 100.452 would be moved to X = 100.5. I've experienced slight movements similar to your issue when leaving objects at coordinates with messy fractional parts.


0

You can also use this script https://gist.github.com/TomByrne/7816376/ It export layers in Illustrator in separate SVG.


-1

Check this vid: http://youtu.be/T6MSeBXerbI It explains how to setup and use macro's to record and execute actions which is just what you need(ed).


3

I will explain how to make one central element. The rest ist straightforward, I hope. Create three concentric circles with equal differences between their diameters (e.g., 200, 250 and 300). Create a vertical line that is as least as long as the biggest circle’s diameter. Centre that line on the circles. Duplicate that line and rotate it by 120 °. You ...


1

Try preserveAspectRatio="none" It will stretch the width to 100%. Here's the code of working svg; <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="100%" height="36px" viewBox="0 0 478 36" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ...


0

I too get a mismatch between a pattern's appearance in Inkscape and in pdf. As a workaround I convert the pattern to objects ( Object -> Pattern -> Pattern to objects or Shift+Alt+I) then what you see on screen is what gets output to pdf. That said, any transformations of the pattern beforehand make the operation hit or miss. E.g. If I fill a square with ...


1

for speed up the method of Matt Bracewell: select two paths combine (Ctrl+K) (you have 1 path) edit node mode (F2) border select the 4 node (close to white space) "delete segment between two non-endpoint nodes" (Alt + Canc) select a pair of nodes "join selected node" (Shift + J) or "join selected end nodes with new segment" (Alt + J) repeat for oher pair


1

You're so close with your question - you just need to turn your mid points into end points. In my screenshot I've filled the parts so you can see the path more clearly. Select one of the pieces and in node edit mode use the separate tool with tooltip "delete segment between two non-endpoint nodes". Repeat for the other piece and now you've got two sets ...


3

You can also do this with Illustrator scripting, with same caveat as @Wrzlprmft's answer that objects have to be at top level. (you can recurse the for loop for groups compound paths etc if you wish. This is a quick example after all): #target illustrator var sel = app.activeDocument.selection; var file = File.saveDialog('save centers', 'center:*.txt'); ...


1

If you look into the source of your SVG (open it with a text editor), you will find mainly stuff like this: <rect style="opacity:0.57009343;color:#000000;fill:#3f3790" id="rect2996" width="10.714286" height="52.857143" x="282.85715" y="155.16518" transform="translate(242.40625,114.78125)" /> Those lines starting with x= and y= ...


2

I opened a few of the SVGs in Inkscape, the grid is just an object. In Inkscape, just single click the grid and press the Delete key. You can single click and drag the grid, just to make certain that you selected it and not part of the icon.


0

This tool might help you to edit the svg file. SVG Editor


3

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


0

Here is the procedure that I have successfully used to import a font and edit it in Illustrator. Use FontBook to import the ttf (true-type font) file onto your computer (you can easily delete it later if you don't want to pollute your fonts) Open Illustrator Select "Window->Type-Glyphs". At the bottom of the Glyphs window, you can select the font that ...


0

You can use SVG filters. I am just not sure its any lighter in terms of speed. Having 75 paths is nothing to the computer, but even a few filters can take the computer to its knees. (this is highly implementation dependent tough.) Here is one way (10 px long shadow): <filter id="Long_Shadow_10" > <feConvolveMatrix order="20" in="SourceAlpha" ...


0

I’ve seen CSS examples where multiple drop shadows of varying offsets and colours are used (usually with box-shadow). You could do the same using shadows in an SVG. Here’s a CSS example: http://www.sandbox.juan-i.com/longshadows/ Having lots of shadows is terrible for performance, so be careful. The same shadow technique can be used in Illustrator, ...


1

Should I design each resolution independently?? It depends on the icon. Flat, bold line art can probably be designed as an SVG and just scaled as needed in the app/website. This is how icon fonts work...they are just vector icons and resize as needed. On the other hand, if it's a photo-realistic icon with fine details, then typically the process is: ...


0

Basically the Photoshop "Extract Assets" process doesn't always work for SVG, you need to open the layer in Illustrator and export as SVG from there....


0

It depends on what you want to do with the SVG. If you are going to be animating it and using it inline, it is better to export it in the format that would be easier to animate. If you are simply using it as an image, you should export it in the format that saves the smallest. It doesn't really matter to the browser, and you shouldn't be seeing it any ...



Top 50 recent answers are included