26 ms·

SVG Gobbler – Find, optimize, edit, and export SVGs

moritzwarhier 2y ago
I often go for https://jakearchibald.github.io/svgomg/ https://jakearchibald.github.io/svgomg/ but I see it has got company, which is great!
deleted 2y ago
[deleted]
myfonj 2y ago
It seem like a super neat project, just why does it need to do the "SVG to React" transformation on the remote? (N.b. that remote endpoint is broken in the "frozen" Firefox version.) It bundles SVGO already, so I'd guess bundling SVGR should not be a problem (?) https://github.com/rossmoody/svg-gobbler/blob/a4a6e8a0511c7afa231e1c1c7f933bb814d98b4b/src/constants/server-config.ts#L5 https://github.com/rossmoody/svg-gobbler/blob/a4a6e8a0511c7a... on ...://us-west2-svg-gobbler.cloudfunctions.net/svg-gobbler-svgr , or ....://us-central1-svg-gobbler.cloudfunctions.net/SVGR in the Firefox version
- themoodyrooster 2y ago
  I'd prefer not to do this remotely, but I couldn't find a browser bundle from SVGR. SVGO provides one. If you can think of a way to do it, please let me know or post an issue on GitHub. Also you can see the server code in the server folder in case you're curious what it's doing.
  - JoeyBananas 2y ago
    Saving an svg is fundamentally a matter of copying whatever is between the <svg> tags and pasting it into a text file. That's literally all you have to do. I have a 5 line JS function that I use for this.
    - themoodyrooster 2y ago
      I don't think what you're saying applies to this conversation of transforming SVG code into configurable JSX for React using the SVGR package.
vizualbod 2y ago
Does this round down extra decimal places from path coords? I find this can greatly reduce SVG size and don’t see it in the feature set. I have some private SVG optimisation functions in Python somewhere, could rewrite to JS and PR, giving meaningful names to IDs is cumbersome work sometimes too
- notpushkin 2y ago
  I think it includes SVGO, which does round coords indeed.
- themoodyrooster 2y ago
  I believe the configurable "Floating precision" number will give you control over the amount of decimal places to round to.
beeboobaa3 2y ago
> SVG Gobbler is a browser extension that finds the SVG content in your current tab and lets you optimize, download, copy, edit, or export What would you use this for that wouldn't be considered copyright infringement? Websites that freely license their art will likely make it available in a convenient download. Those that don't probably won't be giving you a license to use it.
- notpushkin 2y ago
  Some websites have e. g. freely-licensed icons, but don't offer a convenient download. For example, they might require you to sign up first. Or maybe you could download a site's logo for linking back to the website or something. (I'm downloading icons for open source apps that I want to include in Lunni Marketplace [1], and sometimes I have to get it from the projects' website. I'm not sure but I think it's fair use.) [1]: https://lunni.dev/docs/marketplace/ https://lunni.dev/docs/marketplace/
- myfonj 2y ago
  Is a mere downloading and private storage of publicly accessible (copyrighted) visual assets also illegal? I think in most places you can store such content for personal use without infringing the law. I can imagine collecting icons for research purposes might be a valid and perfectly legal use-case here, just like making offline copies of webpages or basically archiving anything (?) Btw, Firefox for example allows you to grab all media from the displayed page (just not those pesky inline SVGs like this extension can) with few keystrokes: Page Info (Ctrl+I) > Media (Alt+M) > Select All (Alt+E) > Save As (Alt+A) > (Enter). ("Page Info" is also under Tools (Alt+T) menu.)
  - beeboobaa3 2y ago
    Probably not, and I'm not saying the tool is bad or anything like that, just wondering what people might use it for. Tools like DownThemAll make sense to me; they're used by end-users who may wish to violate copyright, if it even is copyright violation. I don't mind. But I don't think a lot of people keep a collection of SVGs for personal usage. Me, personally, I only collect SVGs if I intend to use them in a product I'm working on, which is often commercial, and means violating copyright becomes a business risk.
mrbluecoat 2y ago
+1 for the creative name. P.S. Your SVG double quote image is covering a large portion of your review quotes on Android smartphone.
- themoodyrooster 2y ago
  Thank you for this tip! I'll check it out.
butz 2y ago
Be careful when you use the phrase "SVG editor". When you are promoting "SVG editor" - I assume to be able to drag individual points and alter SVG shape, which, I understand, is much harder than applying a transform.
- themoodyrooster 2y ago
  Hmmmm, this is a fair point, but an advantage of this over other extensions like it is that there is a literal editor, IDE, for editing the SVG code.
yboris 2y ago
Related: my favorite tool for optimizing SVGs is https://www.svgviewer.dev/ https://www.svgviewer.dev/

I often go for https://jakearchibald.github.io/svgomg/ https://jakearchibald.github.io/svgomg/ but I see it has got company, which is great!

deleted 2y ago

[deleted]

myfonj 2y ago

It seem like a super neat project, just why does it need to do the "SVG to React" transformation on the remote? (N.b. that remote endpoint is broken in the "frozen" Firefox version.) It bundles SVGO already, so I'd guess bundling SVGR should not be a problem (?) https://github.com/rossmoody/svg-gobbler/blob/a4a6e8a0511c7afa231e1c1c7f933bb814d98b4b/src/constants/server-config.ts#L5 https://github.com/rossmoody/svg-gobbler/blob/a4a6e8a0511c7a... on ...://us-west2-svg-gobbler.cloudfunctions.net/svg-gobbler-svgr , or ....://us-central1-svg-gobbler.cloudfunctions.net/SVGR in the Firefox version

themoodyrooster 2y ago
I'd prefer not to do this remotely, but I couldn't find a browser bundle from SVGR. SVGO provides one. If you can think of a way to do it, please let me know or post an issue on GitHub. Also you can see the server code in the server folder in case you're curious what it's doing.
- JoeyBananas 2y ago
  Saving an svg is fundamentally a matter of copying whatever is between the <svg> tags and pasting it into a text file. That's literally all you have to do. I have a 5 line JS function that I use for this.
  - themoodyrooster 2y ago
    I don't think what you're saying applies to this conversation of transforming SVG code into configurable JSX for React using the SVGR package.

vizualbod 2y ago

Does this round down extra decimal places from path coords? I find this can greatly reduce SVG size and don’t see it in the feature set. I have some private SVG optimisation functions in Python somewhere, could rewrite to JS and PR, giving meaningful names to IDs is cumbersome work sometimes too

notpushkin 2y ago
I think it includes SVGO, which does round coords indeed.
themoodyrooster 2y ago
I believe the configurable "Floating precision" number will give you control over the amount of decimal places to round to.

beeboobaa3 2y ago

> SVG Gobbler is a browser extension that finds the SVG content in your current tab and lets you optimize, download, copy, edit, or export What would you use this for that wouldn't be considered copyright infringement? Websites that freely license their art will likely make it available in a convenient download. Those that don't probably won't be giving you a license to use it.

notpushkin 2y ago
Some websites have e. g. freely-licensed icons, but don't offer a convenient download. For example, they might require you to sign up first. Or maybe you could download a site's logo for linking back to the website or something. (I'm downloading icons for open source apps that I want to include in Lunni Marketplace [1], and sometimes I have to get it from the projects' website. I'm not sure but I think it's fair use.) [1]: https://lunni.dev/docs/marketplace/ https://lunni.dev/docs/marketplace/
myfonj 2y ago
Is a mere downloading and private storage of publicly accessible (copyrighted) visual assets also illegal? I think in most places you can store such content for personal use without infringing the law. I can imagine collecting icons for research purposes might be a valid and perfectly legal use-case here, just like making offline copies of webpages or basically archiving anything (?) Btw, Firefox for example allows you to grab all media from the displayed page (just not those pesky inline SVGs like this extension can) with few keystrokes: Page Info (Ctrl+I) > Media (Alt+M) > Select All (Alt+E) > Save As (Alt+A) > (Enter). ("Page Info" is also under Tools (Alt+T) menu.)
- beeboobaa3 2y ago
  Probably not, and I'm not saying the tool is bad or anything like that, just wondering what people might use it for. Tools like DownThemAll make sense to me; they're used by end-users who may wish to violate copyright, if it even is copyright violation. I don't mind. But I don't think a lot of people keep a collection of SVGs for personal usage. Me, personally, I only collect SVGs if I intend to use them in a product I'm working on, which is often commercial, and means violating copyright becomes a business risk.

mrbluecoat 2y ago

+1 for the creative name. P.S. Your SVG double quote image is covering a large portion of your review quotes on Android smartphone.

themoodyrooster 2y ago
Thank you for this tip! I'll check it out.

butz 2y ago

Be careful when you use the phrase "SVG editor". When you are promoting "SVG editor" - I assume to be able to drag individual points and alter SVG shape, which, I understand, is much harder than applying a transform.

themoodyrooster 2y ago
Hmmmm, this is a fair point, but an advantage of this over other extensions like it is that there is a literal editor, IDE, for editing the SVG code.

yboris 2y ago

Related: my favorite tool for optimizing SVGs is https://www.svgviewer.dev/ https://www.svgviewer.dev/