jQuery to ES6 + Custom SVG download
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

This challenge has 2 parts:


Rewrite this little jQuery snippet using Vanilla JS.

aim is to remove unnecessary jQuery dependency; there is a for-loop attempt already in JS code comments

PART 2 Merge in a "Download PNG" button with help from this working code. And then edit the existing "Download SVG" button with your new method so that each image can be downloaded with style changes applied in-browser.

Resources linked to:

DRAFT code: https://codepen.io/andyfitz/pen/YObMdE

SVG2PNG Code: https://codepen.io/andyfitz/pen/KGdZON

Extra Notes:

PART 1. )

  • Don't worry about styling of the app itself - it's just a placeholder, change anything you need/want as the CSS will ultimately be replaced.

  • Don't worry about browser support. No hard IE support requirements, Firefox and chrome only are fine.

PART 2. )

  • Download buttons should download images that use style changes selected in-app
  • The existing radio button method used to switch CSS can be changed.
  • Fixed PNG export width/height of 512x512 as-is pre-coded is fine, all SVG's fed to this thing will have a viewbox.
  • Use the imgURL from the Draft Code rather than the <textarea> in the PNG Code
  • CSS changes will not convert to PNG unless they are copied inside the <svg> element.
    • Ideally import them when taking the svg to the canvas.
      • This may mean changing how the global style is being switched - thats is ok, just give an example

Aim of this effort

The purpose here to make a list of <img src="*.svg" /> elements inline into the DOM so they can be transformed with CSS by the user and subsequently exported as either modified SVG or PNG.
Creative ways to achieve this outcome outside of what is scoped are also welcome as solutions to this bounty (though heavy dependencies like D3 etc aren't ideal.)

awarded to Wuddrum

Crowdsource coding tasks.

2 Solutions

Doesn’t this still depend on jQuery?
ProfessorG over 2 years ago
Close but missing the svg + png option (two download options)
andyfitz over 2 years ago
Added SVG download feature. Please check it out.
farolanf over 2 years ago
Winning solution

Here's my solution that implements both parts: Version 1 | Version 2

Version 1 scales the resulting image relative to the original SVG size/aspect ratio. This is a better option with the provided example.

Version 2 scales the resulting image with the actual size/aspect ratio that the SVG's get displayed with on the page. This should be the correct version, since it will accurately mirror what's shown on the page. However, with the current CSS, the SVG sizes are quite wide (or tall, depending on the display viewed on) and so the end result contains all the "whitespace" area with it. But as I said, with the correct CSS this should be the best version.

The solution is tested and working on both Chrome and Firefox.

EDIT: Updated Version 2 to include download links for both - PNG and SVG downloads.

EDIT2: Greatly reduced produced SVG file size for Version 2.

This is very close. Just needs distinct SVG / PNG download links . I'll check over the code as soon as I get to my desk.
andyfitz over 2 years ago
Okay so I've checked now, Version 2 does still need the second createImgDownloadButton hyperlink element created. so the DOM will have both <a class="download-link png">download PNG</a> and also <a class="download-link svg">download SVG</a> one which will do the png serialization, and one that will inline the SVG into an svg file. Then that's it! Make sense ?
andyfitz over 2 years ago
Worth mentioning that your solution doesn't have to use the CSS switching method in my pen
andyfitz over 2 years ago
I've updated the solution to also include download button for SVG version.
Wuddrum over 2 years ago
Sorry, didn't catch the download buttons flickering around in Chrome, but I assume that's not an issue since it's a CSS issue only.
Wuddrum over 2 years ago
LEGEND!! awarded! Thanks mate!
andyfitz over 2 years ago
thanks @Wuddrum , I'm merging/testing your code here https://andyfitz.github.io/icon-tester/ cheers again!
andyfitz over 2 years ago
Glad you like the solution, that looks like a nice project.
However, I didn't really like the produced SVG image file sizes, so I improved the solution. Now a lot of unnecessary junk gets removed when serializing SVG images. Currently, for the most complex icon, the file size is reduced by ~1600% (from ~640kb to ~40kb).
I also noticed multiple issues in your project, regarding PNG/SVG saving. Part of those are also fixed with this new improved solution.
Now, to fix the remaining issues you'll need to make some changes.
First Change - you'll need to either inline the filters and linear gradients (shadow and white linear, lines 180-183 in index.html) inside the icon SVG's themselves or attach them programmatically when doing the serialization. ...Continued in the next message.
Wuddrum over 2 years ago
This happens because they're currently defined in a single SVG on the index.html page. However, when SVGs get serialized they don't get access to the predefined filters/gradients that are outside of their own source. You could also attach an id to the dummy SVG that holds the gradients/filters and during serialization copy them over to the SVG that's being serialized, this way they'd still persist only in a single place, retaining good maintainability.
Second change - you'll need to retarget all the css styles that are being applied to the icons, so that they're applied to icons only inside the gallery class. e.g. .fill-blue{fill:#00a4e4} becomes .gallery .fill-blue{fill:#00a4e4}. ...Continued in the next message.
Wuddrum over 2 years ago
This is needed because of how my implementation of file reduction works, it's crucial that a cloned SVG doesn't get applied any styles.
ALSO - currently you've copied the solution code inside the index.js file twice, fix that and a couple console errors will also be fixed.
Doing all these fixes on your project site, I could not find any further issues.
As for the updated solution, the changes only affect getElementStyleString and serializeSvg functions, so that's the only part you'll need to copy over.
Wuddrum over 2 years ago
https://andyfitz.github.io/icon-tester/ @wuddrum I've merged your suggestions and am 100% where I wanted this to be (pending me sorting the which i'll get around to or adapt the upstream assets to include them) thank you !
andyfitz over 2 years ago
View Timeline