Tag Info

Hot answers tagged

70

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


34

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


26

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.


21

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"


19

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


16

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


15

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


13

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


12

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


11

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


11

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/


9

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

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.


8

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


8

but I know nothing about those licenses You have to read them. :) But yes, those are but two examples of licenses that often allow you to freely use them. GPL is an open source license. Creative Commons is not, and will have different stipulations based on the type of license. Crediting in source code wouldn't typically meet the needs of licenses ...


7

The effect you described is simply achieved by duplicating the shape, changing it to outline, moving it up a bit and putting it in the background. What the website you linked to describes is a concept of creating a depth perception. The examples you have given are not meant to represent the final design but how this effect is basically executed. The final ...


7

Your basic question is whether to create your type at its final size the turn it into outlines, or create it at an arbitrary size, outline that, and scale to suit. The answer to that question, especially if you're creating SVG for on-screen viewing, is that it doesn't make much practical difference if all you're using are TrueType fonts. The Metafont ...


7

Yes, a vectorized image generally counts as a derivative of the original, which means that distributing it without the original copyright holder's permission would be a copyright violation. Of course, if you just want to make a nice poster to hand on your own wall, then you're probably safe — doing so might or might not be legal, depending on your ...


7

I haven't read about anyone being sued for vectorizing, but I have read about someone being sued for pixelating. After seven months of legal wrangling, we reached a settlement. Last September, I paid Maisel a sum of $32,500 and I'm unable to use the artwork again. Pixelating is removing detail whereas vectorizing would be adding detail (if you ...


7

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"


7

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


7

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)


7

One simple solution is to export to PDF, and then use Ghostcript on the resulting PDF. Using a strawberry image from Openclipart and the command gs -dSAFER -dBATCH -dNOPAUSE -sDEVICE=png16m \ -r72 -dGraphicsAlphaBits=1 \ -sOutputFile=image.png image.pdf I get the following result. If your image also includes text, you’ll need to add ...


7

This question contains two separate issues, how to do things programmatically and how do you model precise shapes. For all intents and purposes these are unrelated. Seems to me that the only reason you ask the first question is because you are not aware of how to precisely position items within the GUI, but I may be wrong. I will be demonstrating Adobe ...


7

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


7

This is a common misconception. Scalable does not mean infinitely scalable. Not all svg renderers and files are created equal What vector graphics bring to the table is rasterizing on demand. This means that the application showing them can redo the art. This is wonderfull at big sizes but requires special attention when images are small. This is why fonts ...


6

I'm thinking Google SketchUp might be perfect for that. [PRO] Export PDF and EPS: 2D vector images With the Pro version of Google SketchUp, you can export views of your models in PDF and EPS format, allowing you to continue to work on them in vector editing programs like Illustrator and Freehand. For 2D images that need to be ...


6

Actually, for print EPS or PDF would be better. SVG is okay for web (which is what it was designed for) but often there are issues with RIPs when printing. Most designers who are supplied SVG files will open them in a vector app and re-save as either native files, eps or PDF. I would NEVER send an SVG file to a print provider.


6

EDIT: I have just learned from @AlanGilbertson in this thread What unique benefits does the EPS format provide? ..that eps has limited uses, and in general that pdf is the way to go. If the client does not have any preferences; a good practice would be to give them an .eps and a pdf and an svg file in addition to jpg/png in different sizes. If you also ...


6

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.



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