Convert Inline SVG to an Editable Vector File

Convert Inline SVG to an Editable Vector File

by

Convert Inline SVG to an Editable Vector FileWhen working on a logo redesign, it can be useful to have resources from the client’s existing brand. The client may wish to keep the same typeface as their current brand or they may wish to use the same color palette. Whatever the case, it’s helpful if the client can provide any artwork in a vector format.

The Challenge

A recent logo redesign project required that we use text from the client’s existing logo. We had the liberty to reorganize the layout of the text, but it was critical to match the exact typeface. The client didn’t know the name of the typeface and the only artwork they could provide was in a JPEG (raster) format. One available solution was to spend time searching for an appropriate typeface match. But a closer inspection of the client’s website showed that the logo at the top of the web page was an SVG (vector) file. Unfortunately, that logo was not referencing an SVG file, but a string of inline SVG code in the HTML file. We had to extract the textual content from the logo, but we first needed to convert the SVG code to an editable file.

The Solution

Should you encounter a need to convert SVG to a file, the process of doing so is straightforward.

  1. Use your browser’s “View Source” or “Page Source” command to view the page’s HTML code.
  2. Locate and copy all the code between the beginning <svg> and closing </svg> tags.
  3. Paste the copied code, including the <svg> and </svg> tags into your text editor of choice. (Atom, Brackets, Visual Studio Code, Sublime Text, etc.)
  4. Save the text file as an SVG file. (ex. legacy-xyz-products-logo.svg)
  5. Open the SVG file in your preferred vector editing tool. (Adobe, Illustrator, Affinity Designer, Sketch, Inkscape, etc.)

SVG content offers numerous performance benefits over standard raster-based imagery. As such, it’s important to learn how to work with this format in its inline state. An article about how to convert inline SVG code to an editable SVG file may come as common sense to some. Still others, less confident with code, may find value in a description of the conversion process.