Something that looks better at smaller res.

If JavaScript fails to load, the links in the menu don’t work. Some of these depend on the presence of JavaScript, so perhaps should have a disabled state in this case? But two are useful and have no dependancy; the link to the README file, and the link to SVGO. These should work regardless.

Currently SVGOMG removes ARIA attributes such as "aria-labelledby" if the "Remove unknowns and defaults" option is enabled.

A pattern that I use is to label the contents of an SVG image with its title element:

<svg aria-labelledby="image-title">
<title id="image-title">Title Of This Image</title>
....
</svg>

Reference: https://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/

Would it be possible to add attributes beginning with "aria-" into the "known" category?

(there may be some knock-on effects for the "Clean IDs" option: if an ID is being referenced by an ARIA attribute, it shouldn't be removed)

I love using the Paste Markup & Code View to quickly optimize SVGs without having to mess with a lot of files. However, when I toggle over to Code View, I want to hit CMD + A to select all and copy the code out, but I always end up text from the UI:

Open SVG
Paste markup
Demo
Contribute
About
Powered by the incredible SVGO


IMAGE
CODE
765 bytes - 12.97% saving
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> ... </svg>

Any way to make it easier to copy the code view? Two suggestions:

• Make Code View a textarea or iframe so it's isolated from the rest of the document
• Add user-select: none to all the UI elements to prevent the text from being selected.

I'm not interested in a batch mode, but a view that shows the equivalent cmd will enable this

Loading SVG in an iframe breaks the back button something rotten

Using a 3d transform when zooming/panning the image makes it super smooth in Safari & Chrome, but you gets pixels if you zoom in too much.

I tried switching to a non-3d transform after 300ms of idle, but it really kills performance, even on desktop (Canary is ok, but stable Chrome dies).

Need to find a workaround.

I just discovered svgomg and it's clearly best in breed - nice job. I'm going to run 50 or 60 similar svg files through it. I can't help but think that it would be nice if I could save my settings and features, so that I don't have to edit the list every time. Even if this were a session-based "save settings" feature, it would be a huge benefit, but a user sign-up/in might permit the user to create and save multiple settings profiles, which would be handy for different illustration types and desired svg output.

Hi,

I'm curious as to what this build actually is and how it was put together. I did a browserify svgo.js -o svg.js and the output looks nothing like what you have running at https://jakearchibald.github.io/svgomg/js/page.js

Out of curiosity, what exactly was used to make this project?

Many thanks.

See: https://twitter.com/jaffathecake/status/616548434422702080

Information can include:

• Minimum browser requirements
• Suggested alternatives beyond the browser (even if it’s just a link to SVGO, or a tutorial about integrating SVGO into your workflow)

I've gone so far as to make a bookmarklet to hack this in, since every once in a while you get some SVGs that really benefit from dropping the decimal points.

…maybe IE too, I haven't tried outside a VM.

It's fast in Safari/Chrome because it's rendered to a texture (which causes #9), maybe do this manually?

When touch/click on the image, hide the SVG and replace with a canvas with the SVG written to it. This will be a lot quicker in the browsers that are repainting the SVG per position/scale change. Once panning/scaling complete, swap the SVG back.

This could look weird with animated SVGs, as the canvas would represent a single static state.

…it'd be nice to find a mobile-friendly way to do this though.

The output image has scrollbars & overflow:hidden doesn't appear to fix them. Need to find a way around that. Maybe iframe.scrolling == false.

because http://caniuse.com/#feat=download

Is there a workaround?

I noticed when exporting from Illustrator .st1{display:none;}.

If there's hidden layers it outputs the code in the SVG and then hides them. I understand that sometimes this might be useful, but it would be nice to have an option to remove them if possible.

E.g.
Toggling the option on would remove any code classes with display: none along with associated tag.

Hopefully that makes sense. I'm interested to know what you think, or if there's another solution to this issue that I've missed.

I have a 244 Mo SVG file produced by the Matlab function "plot2svg". Usually the function produces files of a reasonable size, but I gather this time the plot was relatively complex in terms of number of points. I can't open the SVG file in Inkscape (0.48.4) so I've been trying to optimize the SVG file to reduce file size. I tried the SVGOMG GUI (https://jakearchibald.github.io/svgomg/) on Firefox (40.0.2) and Chrome (44.0.2403.157 m) but when loading the image it would hang or crash, respectively.

Is the online version of SVGOMG simply not built to deal with large SVG files? What can I do?

Edit: turns out it was a stupid coding mistake that caused the same line to get plotted over and over, hence the huge file size. my bad..

Before:

After:

This isn't a big problem, since all things considered one almost always wants a viewBox. What's interesting, though, is that it seems to trigger another go-round on the multipass compressor, which shaved off another 3% (at the expense of visual quality).

Feature request:

I hope it is possible to achieve it following these rules:

For each element with fill="#000000" assign a class .k1 and remove inline color definition;
For each element with fill="#FFFFFF" assign a class .k2...

then add the class to the top of <svg> within a <style> element

A further improvement would be to detect all siblings sharing the same fill value and wrap them in a <g>. Example:

<path fill="#000">
<path fill="#000">
<path fill="#000">

becomes:

<style>
  .k1 { fill: #000 }
</style>

<g class="k1">
  <path>
  <path>
  <path>
</g>

Lots of excessive painting happening. Find out why.

Hello,

Let me once again thank you for the great tool!

I’m not sure it’s possible, but here goes: with all my SVG optimisations, I just try to go as far as I can without introducing too many distortions in the image. To judge how the optimised image differs from the original quickly toggling them both works well. Unfortunately, this is now not possible as with every click on Show original I have to wait for the calculations to finish (I would rather have it show the cached view at the current zoom/pan).

Here are two other possible ways to indicate differences (original 5,5MB https://upload.wikimedia.org/wikipedia/commons/e/e3/Caucasus_mountain_range_map-fr.svg, optimised 1,6MB):

• a quick toggling:
  
• a blend mode of difference applied to the top optimised image overlayed over the original:
  

The second option would be more indicative with increased contrast or equalize filter, but that’s even less available in CSS than blend modes, I suppose.

In an ideal world SVG(OMG) would accept a user-provided tolerance and asses the output of similar operations to optimise images until it reaches a given distortion.

Just thinking out loud, feel free to close whenever.

Regards
m.

The ability to copy the code to the clipboard. Right now it is quite hard to copy paste since the sidebar content is copyable. What do you think? Something you would consider adding?

SVGOMG - the SVGO stands for SVGO, obviously. The G stand for GUI. The M?

Enabling "Collapse useless groups" on the below SVG will make the text "Till linserna" to become invisible.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1180 500" style="enable-background:new 0 0 1180 500;" xml:space="preserve">
<style type="text/css">
    .st0{font-family:'GillSans-Italic';}
    .st1{font-size:22px;}
    .st2{font-family:'GillSans';}
    .st3{font-size:23px;}
    .st4{font-family:'GillSans-SemiBold';}
    .st5{font-size:55px;}
    .st6{fill:none;stroke:#231F20;stroke-width:0.75;stroke-miterlimit:10;}
    .st7{fill:#33CC99;}
    .st8{fill:#FFFFFF;}
    .st9{font-size:20px;}
</style>
<image style="overflow:visible;" width="1180" height="500" id="bg" xlink:href="5DD60EA1547AE62.jpg" >
</image>
<text id="catch" transform="matrix(1 0 0 1 107.6774 151)" class="st0 st1">Linser låter dig fånga ögonblicken</text>
<text id="shop" transform="matrix(1 0 0 1 44.8288 213)" class="st2 st3">HANDLA DINA LINSER NU, FÅ UPP TILL</text>
<text id="discount" transform="matrix(1 0 0 1 80.0431 282)" class="st4 st5">30% RABATT</text>
<line id="line" class="st6" x1="86.3654" y1="171" x2="404.3654" y2="171"/>
<a id="nm-bt-buy" xlink:href="/kontaktlinser" >
    <g>
        <path id="bt-bg" class="st7" d="M345.1844,364.6502c0,4.5506-4.0786,8.2297-9.1233,8.2297H155.743
            c-5.0446,0-9.1232-3.6791-9.1232-8.2297v-21.3004c0-4.5506,4.0786-8.2297,9.1232-8.2297h180.3182
            c5.0446,0,9.1233,3.6791,9.1233,8.2297V364.6502z"/>
        <a xlink:href="/kontaktlinser" >
            <text id="nm-to-lenses" transform="matrix(1 0 0 1 198.7199 360)" class="st8 st2 st9">Till linserna</text>
        </a>
    </g>
</a>
</svg>

Sometimes you want to color the SVG with a CSS fill.

Using

• + & - zoom buttons
• Click-drag for panning
• Touch for panning
• Mousewheel for scaling in pixels
• Mousewheel for scaling in lines (Firefox with mouse connected)
• Pinch for scaling

I really enjoy the drag and drop function but when it comes to the situation where you have two or more graphics you want to send through this brilliant machine i always have to reload the browser to be able to drag & drop again. Could you implement this functionality to work every time when clicking on the menu-icon, not only after the app loads?

Hey there!
first of all I'm so glad I've found this awesome app, really appreciate your work and effort!

I'm just wondering how do I set a color background instead of the nice "transparent" tiled background?

Atm I simply fiddled with the browser dev tool in the <html> element style but I think it's such a basic feature that I'm sure I'm just missing something obvious.

What am I doing wrong? Thank's a lot and my hat to you for this project! ;)

The namespace in SVGs is optional for inline elements, but if I try to paste one such SVG into SVGOMG, it fails to load them because they are in a iframe where the namespace is actually required:

It would be great if you could add a missing namespace to these SVGs for preview purpose, and ideally also remove it again before downloading.

Not really a bug, but did I miss something?

Is it possible to make a button somewhere to copy the optimised svg to the clipboard or make it possible when pressing the shortcut CMD + A that only the svg is selected.

Thx

Steps to reproduce:

1. Open https://jakearchibald.github.io/svgomg/ in Firefox
2. Select Paste Markup and paste a simple SVG document
3. Switch to the Code tab.
4. Click the Image tab.

Results: the tab itself gets focused but the Code content remains.

Note: I have this issue systematically, but when keeping the Firefox devtools open to look at what is happening, it ends up working most of the time. With the devtools closed, I’ve seen it working a few times, but not often. It’s kind of an intermittent bug.

Tested today on Firefox 48 and 49 on OSX, but I’ve had this issue on Win10 as well I think, and for a very long time (maybe since the first release of SVGOMG).

This throws a validation error if you are using svg in epub. It appears to be a required part of svg spec. for use in epub

Only tested on Chrome but the zoom direction on scroll looks inverted (ie scrolling down zooms in)

Each plugin has additional settings. Allow them to be altered.

Each plugin option would need a way to expand/contract.

When I create an SVG in Illustrator, save it with EDITABLE text (not outlined) and then open on an editor like SVG-edit, the text is not imported.

Would be awesome if we could use svgomg to convert an SVG to keep it's text editable.

Is that possible?

Thanks

If I attempt to load certain SVG files, either through upload or paste, SVGOMG will sometimes choke on them and display

Minifying error: s.attr(...) is undefined

Here's an example of one such file:

<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100%' height='100%' viewBox='0 0 1600 490'><path d='M 1538.43,2.71 1595.1667,30.293333 1569.81,197.04 1600,181.24 1600,490 0,490 0,184.27 18.02,196.22 13.39,79.86 l 63.56,-1.68 32.49,45.64 47.45,-6.53 47.98,40.72 44.97,151.18 47.4,15.97 -32.22,-172.14 76.94,-9.06 41.12,33.94 44.98,-12.3 54.22,39.93 55.23,163.92 46.67,10.77 -73.23,-166.38 52.16,-27.63 38.26,17.56 31.12,-20.28 31.55,16.79 46.65,-20.19 56.41,31.87 31.88,179.59 27.33,0.8 14.29,-178.5 38.64,-23.79 43.93,25.99 34.16,-18.85 25.71,17.8 60.25,-27.74 37.77,23.68 -35.37,174.34 37.38,-9.36 67.78,-189.93 68.99,-34.92 39.31,9.94 56.87,-48.04 44.71,24.29 -44.93,172.77 34.69,-7.04 60.69,-186.74 46.27,-49.85 36.41,10.9 z' fill='#d23e2c'/></svg>

Whenever SVGOMG chokes on an SVG, it presents the user with something like Error: s[element] is not defined.

Going up the chain from svgomg > svgo > sax, it looks like those errors are human-readable at some point, and include information like "namespace not bound," "element not recognized according to DTD," etc.

It would be less hair-raising if those error messages could persist, somehow.

Hi,

Maybe this is a set error/RTFM thing but maybe not. I exported a logo from Illustrator CC 2015 and received the initial 'Load failed: Invalid character entity'. I then looked a your demo's code and saw there was no DOCTYPE element so took that out of my file.

I also ripped out the pile of info Illustrator adds to the file is now 9KB instead of a massive 791KB. So glad I've learned that trick. This includes the AI's XML namespace declaration.

Am I doing something wrong or is it an issue with svgo?

I've attached the file so you can investigate if you need to.

And thanks for providing svgo and so many ways to use it. I've had to rename it as text since GitHub doesn't allow attaching SVGs or XML (find that one a bit odd)

Regards,
Lee.

Logo copy.txt

Now i have a few issue. I haven't mouse scroll to zoom. I was wondering that you haven't buttons to zoom. An example all maps have this buttons

An option to toggle between SVG output (the view that's there now) and code output, with syntax highlighting.

I think the manifest spec could help here (for providing a non-restricted icon to other platforms.

It would be awesome if SVGO could optimize SVG markup provided by a URL parameter ( https://jakearchibald.github.io/svgomg/?svg=%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2050%2050%22%3E ... ). This would allow quick optimization from another webapp or even from a desktop app like Alfred.

Salut!

I use SVGOMG every single day, it is just great! But each time, I have to re-set my config. I don't thing it would be really hard to implement a cookie system that would remember our config.

Math

I needed this solution just now and wondered if it would be a nice feature?

http://stackoverflow.com/questions/23560038/html5-inline-svg-autocrop-whitespace

Works pretty well, although there might still be some adjustments needed to the to the height and width if they are already set.

How can I reduce the stack size in order to upload my svg file? Are there any workarounds?

It would be great to have an option to encode (with method encodeURIComponent) svg code so it could be used in css.

After downloading the SVG zoom direction when non-standard scroll mouse.