LiveArt’s HTML5 Online Design Studio offers a cutting-edge mobile experience on iPhone, Android, and Windows mobile platforms and uses most of the up to date web standards including SVG. To support the industry demand for high-quality output from online product designers, we have implemented SVG as the core technology of LiveArt HTML5.
While SVG is supported by the majority of the browsers and mobile platforms, it is often necessary to produce lower resolution images as design previews or proofs. The most common scenario is a small thumbnail in a shopping cart that will assure the user he has ordered the exact design. For other production purposes, other different images and formats might be required.
Since most of the backends are Unix or Linux based, our team recommends the following tools to do best for SVG conversion job:
- ImageMagick - the most popular and very powerful conversion tool. The convert command is widely used for different conversion and can do simple SVG conversions as well.
- rsvg - a highly-specialized library for SVG processing. Recommended for use if you have complex designs, uploaded images, and custom fonts (see also note on custom fonts below). rsvg is also a common delegate tool for ImageMagick convert as well.
- Inkscape - a popular free SVG editor. While we recommend using it as an editing tool to convert LiveArt output into different printing formats, it also available for usage as a command-line tool for conversion.
If custom fonts are used inside SVG design, make sure to have them installed into the backend system BEFORE you are running the conversion tool. This would ensure your converted output would keep the original fonts inside the designer.
If you are planning to use SVG in a traditional graphic software like Illustrator or Coreldraw, make sure you also run a short checklist to get your output prepared for that:
- Copy all externally referenced images locally. Ideally, place them into the same folder as your original design;
- Install the custom font used on your system;
- Since SVG is an open and understandable text formatted file, open it with a text editor. Replace all absolute xlink:href references to local files you have prepared in previous steps;
- While the design would look exactly as you have designed it in the browser, be prepared that professional software may displace certain elements like text. Looks like software grands are still learning to support web standards.
Let us know if the above pieces of advice were helpful to you. Good luck and happy online designing!