SVG Vector Export in Affinity Photo | Basic Use | Web Pages Light Format

Youtube video on subject


SVG files are a great format to use with web pages, you can create amazing designs in Illustrator and then exporting them, you get a file of less than 100K which is super light for web pages to load, especially in the days of mega video files etc. Illustrator can export the SVG format, which is basically a text file with XML code in it


You can use the save as command, it is fine but the other approach is better


Go to the menu command in the file menu and then use the for screens command. You can then format for SVG. It will open the location on clicking OK, will also create it in sub folders. You can also set a location. You can also use the export as command and save the work. Once you have clicked that, you will get another dialog with styling, font, images, object ids, decimals, minify and responsive and I generally leave the defaults. You can trim off some code size if you set the decimals to 1 but the result is generally not as good.

Text file

The code generated is text and you can go to that and edit it in a normal application such as notepad or Dreamweaver or text pad etc and remove additional code that adds little to the end result. You can then copy the text from there into your HTML pages or use it as a separate file or reference it in your HTML code.