Get any SVG on a web page

Sometimes it is useful to get SVGs from a web page, but sometimes it can be complicated to get them. That’s why I propose you a trick that allows you to retrieve all the SVG on a web page thanks to javascript. Don’t be afraid, no javascript skills are …


This content originally appeared on DEV Community and was authored by Clément Gaudinière

Sometimes it is useful to get SVGs from a web page, but sometimes it can be complicated to get them. That's why I propose you a trick that allows you to retrieve all the SVG on a web page thanks to javascript. Don't be afraid, no javascript skills are required here.
The following procedure is easier to do on Chromium browsers even if it is possible with Mozilla Firefox. In my case, I will illustrate the procedure with Chromium.

  • First of all you will create a new bookmark, to do so, go to this url in your Chrome/Chromium browser : chrome://bookmarks/

  • Then click on "Add new bookmark", as shown in the image

Alt Text

  • You give it the name you want (ex : get SVG)

  • In url you enter this JS code :
    javascript:javascript: (function () { var e = document.createElement('script'); e.setAttribute('src', 'https://nytimes.github.io/svg-crowbar/svg-crowbar.js'); e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();

  • Then you click on "SAVE".

Alt Text

Alt Text

  • Here, either there are several of them and it gives you a summary of the vector images found on the page, or there is only one and it offers you to download it

  • You are now able to download all the vector images!


This content originally appeared on DEV Community and was authored by Clément Gaudinière


Print Share Comment Cite Upload Translate Updates
APA

Clément Gaudinière | Sciencx (2021-04-30T16:36:33+00:00) Get any SVG on a web page. Retrieved from https://www.scien.cx/2021/04/30/get-any-svg-on-a-web-page/

MLA
" » Get any SVG on a web page." Clément Gaudinière | Sciencx - Friday April 30, 2021, https://www.scien.cx/2021/04/30/get-any-svg-on-a-web-page/
HARVARD
Clément Gaudinière | Sciencx Friday April 30, 2021 » Get any SVG on a web page., viewed ,<https://www.scien.cx/2021/04/30/get-any-svg-on-a-web-page/>
VANCOUVER
Clément Gaudinière | Sciencx - » Get any SVG on a web page. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/30/get-any-svg-on-a-web-page/
CHICAGO
" » Get any SVG on a web page." Clément Gaudinière | Sciencx - Accessed . https://www.scien.cx/2021/04/30/get-any-svg-on-a-web-page/
IEEE
" » Get any SVG on a web page." Clément Gaudinière | Sciencx [Online]. Available: https://www.scien.cx/2021/04/30/get-any-svg-on-a-web-page/. [Accessed: ]
rf:citation
» Get any SVG on a web page | Clément Gaudinière | Sciencx | https://www.scien.cx/2021/04/30/get-any-svg-on-a-web-page/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.