Implement our own SVG optimizer (remove SVGO) #652
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This will replace the external application 'SVGO' with our own implementation. We don't want to be dependent on external (bloated) nodejs stuff just to "clean" our SVG. This function optimize any SVG "for the web" (aka production).
Don't optimize if preview (HTML).
|
Cool! I'm curious, what optimizations will be included? Will them be configurable? |
Member
Author
Same as SVGO, https://github.com/friction2d/friction/blob/9414883a2b9569c3f90a10b0cbd732b1558d97d6/src/app/svgo.config.js You can't configure anything, either on or off. More features could be added, but not a priority (from me). The primary reason was to avoid using the svgo binary. |
|
What about a space removal to end up with a shrink file, kinda what is commonly done with CSS? |
Member
Author
|
We apply a simple "minify", removing whitespace etc. No optimize: <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Friction - https://friction.graphics -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080">
<rect width="1920" fill="#000000" height="1080"/>
<g transform="translate(5 5)">
<g transform="translate(704.303 342.681)">
<g>
<animateTransform attributeName="transform" calcMode="spline" keyTimes="0;0;1" dur="9.96667s" type="rotate" values="0;0;186.831" keySplines="0 0 1 1;0 0 1 1" repeatCount="indefinite"/>
<g transform="scale(1 1)">
<g transform="skewX(0) skewY(0)">
<g opacity="1" transform="translate(-5 -5)">
<rect x="0" y="0" stroke-linecap="round" id="RectangleBox" width="523.07" stroke-linejoin="round" fill="#6ce94f" stroke="none" rx="0" stroke-width="10" ry="0" fill-opacity="0.432197" height="366.616"/>
</g>
</g>
</g>
</g>
</g>
</g>
<defs/>
</svg>Optimize: <!-- Created with Friction - https://friction.graphics --><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080"><rect width="1920" fill="#000000" height="1080"/><g transform="translate(5 5)"><g transform="translate(704.303 342.681)"><g><animateTransform attributeName="transform" calcMode="spline" keyTimes="0;0;1" dur="9.96667s" type="rotate" values="0;0;186.831" keySplines="0 0 1 1;0 0 1 1" repeatCount="indefinite"/><g opacity="1" transform="scale(1 1) skewX(0) skewY(0) translate(-5 -5)"><rect x="0" y="0" stroke-linecap="round" id="RectangleBox" width="523.07" stroke-linejoin="round" fill="#6ce94f" stroke="none" rx="0" stroke-width="10" ry="0" fill-opacity="0.432197" height="366.616"/></g></g></g></g></svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This will replace the external application 'SVGO' with our own implementation.
We don't want to be dependent on external (bloated) nodejs stuff just to "clean" our SVG.