Web application

How to name SVG files to facilitate common use between design and development

Written and maintained by:Sweet Tomato E-commerce Technology Co., Ltd. Updated

The file name should indicate the subject, purpose and necessary version, for example brand-mark-dark-v2.svg. Avoid using names such as final version, new final version, etc. to allow the recipient to distinguish between the original draft, the edited draft, and the web export.

Determine the problem and applicable conditions first

The same material may have dark, light, monochrome and different artboard ranges. Using consistent naming rules is more reliable than keeping multiple downloads with the same name in a folder; it can also help locate updates for website resources, but it cannot replace version management.

Process and check in order

  1. Determine language, separator, and casing rules within the project.
  2. Mark original, edited, delivered and preview versions respectively.
  3. Delivery with a short list of which file should ultimately be used.

Check the finished result

Do not write customer privacy, order numbers or keys into public file names. Including SVG keywords in the file name will not guarantee search rankings. What really matters is the content, link semantics, page description and accessibility.

SVG format basis and reference materials

SVG can contain both vector shapes, images, and text. Therefore, a file name ending in .svg does not alone prove that the original image has been converted to an editable path.W3C SVG 2 Specification: SVG Graphics Objectdescribes these object types.

The above information is used to describe the file format. The upload restrictions, membership requirements, results saving and editing capabilities of this site are subject to the page description and actual functions.

Further reading