Tag Info

New answers tagged

1

I've never used MarvinSketch and I don't know if you can avoid tis behaviour using some settings, but the cut in your image is due to a clipping operation (see also here): To remove the clipping mask, open your SVG file in Inkscape, select your object, in object menu choose clip and release: You see now the black mask (a rectangle) over the drawing, ...


1

This problem has nothing to do with software choice or settings therein but basic mathematics. If your output is intended to be square raster files in multiples of 22 then the source (vector) file and the major elements should be simply divisible by 22. With the horizontal line elements in your design being half the height of their respective dots, and ...


2

SVGOMG! is an Awesome Web-App for SVG Optimisation According to the creator of the app, SVGOMG is SVGO's "Missing GUI". Running it on the image provided brings it down to just 3.42kb, and just 1.4kb after being gzipped.


3

I've recently found a tool at https://petercollingridge.appspot.com/svg-editor (source code) that helps optimize SVG files. It has good results in this case, bringing the file size down to 3.7kB, which is just over half the size of the JPG, with a little manual adjustment: Using this tool to optimize SVG files requires significantly less time than golfing ...


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.


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


0

Inkscape 0.91 and above has the ability to toggle antialiasing. This can be accessed through the Document Properties window (Shift+Ctrl+D). When turned on, which is the default, this image of an array of triangles looks like this. When turned off the image looks smoother. As others have mentioned, this currently has no effect on the png export. ...


4

You can convert it to a compressed SVG (SVGZ) and put the image.svgz on your web page: gzip image.svg mv image.svg.gz image.svgz Or, in Adobe Illustrator, simply save as "SVG compressed", which will write an image.svgz file. For your test image it's still larger than the JPG, though: image.jpg: 7268 bytes image.svg: 22385 bytes image.svgz: 14614 ...


33

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


-1

Sounds like you have a layer, or shape underneath. Paste the SVG code here if you want a detailed answer.


1

If they are shapes, select them all, duplicate them, then union them into one shape.


1

The Image Trace tool is a good tool to start with, but after that you have to clean up the result. To have a nice ribbon, I would select the ribbon segments, go to the Pathfinder palette and click on Unite to have one object, and then fill it with a gradient. There are also gradients in the lion (one for the head and one for the body), you could use that ...


1

The artifacts you experience come from the supposed-to-be invisible strokes at the outer rim of the stacked objects created for each color chosen at tracing. Artifacts may become worse in case we had applied a Gaussian blur to the bitmap before tracing. This is done by the smooth option in the Inkscape trace dialog. Therefore it was a good idea to not check ...


1

The problem is basically in the way Inkscape is deciding to split your image into color regions: instead of simply having the lighter colors overlap the darker ones (or vice versa), you're ending up with two adjacent color areas that both overlap a third color. Since the edges don't line up perfectly (due to both tracing inaccuracies, and also some ...


0

I think it can be done much easier. In Illustrator open the GLYPHS panel, on the canvas make a empyt text field, set the font of that text field to the icon font and that dubble click on an icon in the GLYPHS panel.


0

You need to use a font typeface that scales to smaller sizes, allowing the browser to render the font with better clarity. Not all typefaces are suited for extremely small, same goes with some types are not suited for large print either, as they become too pixelated.


0

SVG is a vector file format so it's the anti-aliasing decisions are being made by the software rendering the SVG--in this case the browser. I think at the size you are going for, it looks just fine. But if you want to be able to tweak things, you'll have to create a raster version that you can then go in there pixel-by-pixel and tweak the anti-aliasing ...


1

archive for web: use google fonts. using only two font families max. Export: fonts: (text: svg, subconjunto: none). properties svg: (style element). within the styles of the resulting file, edit it: attach line "@import". attach "px" to all font-size. rename the font name. result: <style type="text/css"> @import ...


2

I am not aware of any GUI way of doing this, but you can use Inkscape’s command line interface to export SVGs to PDFs, e.g., like this: inkscape image.svg --export-pdf=image.pdf If you have some reasonable naming convention for your SVGs and PDFs, you can write a simple script that checks all SVG–PDF pairs as to whether the SVG is newer and makes a new ...


0

I found a way to do this in this question: Inkscape - Center Drawing to Page via Command Line/Terminal


1

I am not familiar with Sketch, but based on my AI experience, the problem might be that the rounded corners of the hexagon might have been created using a feature that is not a standard SVG feature. SVG is a vector format but it does not support every possible effect, shortcut and visual candy that the vector editing softwares include. Some effects are ...


0

I used a little XSL transform I wrote to convert the svg font to a svg graphic. The resulting svg file can be opened in illustrator. Here is the xsl: <xsl:stylesheet xmlns="http://www.w3.org/2000/svg" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" ...



Top 50 recent answers are included