Skip to content

Preparing SVG artwork for LiveArt HTML5

← Gallery configuration
Make sure to visit one good article on exporting SVG using the Illustrator CC. It covers lots of aspects and would really help a lot in getting your artwork online in LiveArt. We would just add couple of recommendations below:
  • Make sure your vector data is optimized, does not contain any hidden elements or embedded large raster images.
  • Always remember that your user will be using mobile internet most of his time, so you might want SVGs to be small.
  • If you choose to proceed with CSS Properties: Style Elements, we recommend ensuring the unique names for these. By default, AI names them in a common way like "fil0", "fil1" and so on. If you use multiple SVG artwork in one LiveArt design, these can interfere inducing the random color change in the logos. To prevent the above effect fully, we recommend setting CSS Properties to Presentation Attributes, where each style will be hard-coded into its respective vector element.
  • For single color colorizable image:
    • Select All and fill with black (#000) color  (From v0.10.34 you may skip this step)
    • Export with presentation attributes only (Corel Export Settings sample)
  • Use https://jakearchibald.github.io/svgomg/ utility to prettify and clean up your SVG;

SVG should not contain:
  • Any referred external images;
  • Any extra namespaces like RDF, sodipodi etc;
  • Any clip-paths inside that may conflict with other elements on LiveArt stage;

Thumbnail dimensions are 110x110 px by default.
Suggested SVG gallery image dimensions are 300x300 px.

Feedback and Knowledge Base

(thinking…)