I find myself regularly scouring business websites for logos to use. More and more of them use build pipelines that take all SVGs and embed them inline, making it impossible to just right click and download the image.
Here is my short workflow for downloading inline SVGs:
- Open up your inspector and copy the whole SVG element.
- Open your favorite text editor (mine is VSCode) and paste the whole SVG element you just copied into a new file and save it as
companyname.svg - Open your new
companyname.svgin Sketch.app and change the colors if needed. Sometimes the colors are applied via CSS, which won’t come in with the SVG element. - Export the logo as your filetype of choice. Mind the size because inline SVG elements are often small. I usually export PNGs at @2x.
Note: I still use steps 3 and 4 even if my end goal is SVG. First, I want to make sure the colors are correct. Second, Sketch adds some important attributes to SVGs like Viewbox that are helpful if you are using the file on the web.
Here is a video I made walking through the process:
