SVGs (or Scalable Vector Graphics) are images built from a text-based "recipe" that is human-readable. SVG Outputs let you create these 2D images based on dynamic text from Snap rules, so bar graphs or dials or other images can reflect the data from your configurator.
After they are created, SVG outputs can be exported into a more common format, such as GIF or PNG, and then that export can be placed into other outputs, like Word or Zip outputs.
Before you begin creating an SVG output, you should be familiar with the basics of creating an SVG Viewer Element in Epicor CPQ.
SVG Output Properties
Along with the standard properties shared by most outputs, SVG Outputs also have the following:
Property | Example |
---|---|
XML |
The SVG code which builds the image. For example: <svg height="500" width="500"> <ellipse cx="100" cy="70" rx="85" ry="55" fill="black" /> {" "} <text fill="#ffffff" font-size="45" font-family="Verdana" x="25" y="86"> Epicor CPQ </text> </svg> |
Height Width |
While SVG images have a height and width for the logical canvas, to render the SVG image you must specify the height and width of the output as well. Consider the size of the space you want this image to fill when it's used later on in another output. Is it just a logo in the corner of a Word output? Maybe 200 x 200 is ok. Or is it going to stand alone in a Zip output, to be used for many purposes? Maybe 1000x1000 would be a better size. |
Create Dynamic SVG Outputs with Snap
SVG outputs can be made dynamic with Snap. Remember that any of these properties (usually, the "XML" value) can be modified run-time through Snap rules. Snap offers many ways to manipulate text.
For example, the Snap code below is a simple rule for an SVG output. It creates an SVG graphic from the current quote owner's profile image (set on their user record, and usually seen in the corner of the screen). Note how the SVG is set to a specific size.
Export SVG Outputs for Use Elsewhere
To get an image you can use just about anywhere, you should export your SVG graphic into another more transportable format, such as JPG, PNG, or GIF.
Why export it?
When this output completes, it results in an SVG graphic: a series of human-readable instructions describing how the image should look. Instructions like these can be easily placed into a web page because modern web browsers know how to follow these instructions to create the image on-screen. Other tools (like Word documents, PDF documents, and the like) don't follow these instructions. So if you try to include your SVG graphic in a Word document, or download it as a file and try to open it, you'll just see the text instructions, not the image itself.
How to export it?
See the full instructions on how to perform an export, but the process is simple:
- Create your SVG Output.
Usually, you don't want your users to see this confusing SVG file, so give it no tags: it will therefore be invisible to them. - Create a more useful Export version of your Output.
In your design tree, click the "+" symbol next to the "Exports" folder of your SVG graphic, and add a "png" export (or whatever format you prefer). If you want your users to use this file on its own, you can add any necessary tags. Usually, this export is also not tagged. - Create an image field in the final output document where you want the image to appear.
In this screenshot we create a Word output document. You could also create an Excel output, a Zip file output, or many others. - In your final output document, set the image field's contents to that useful export version of your Output in step 2.
For example, in a Word output, create a word image field, and set its contents using a "set image" Snap block:
In summary, this example shows 1) MySVG exported as a 2) png Export referred to in a 3) Word output's "wImageField" through an 4) Output Rule.
Localization
If your SVG output contains text, you can localize that one output into many languages. The best approach would be to take the text out of your image, and replace each snippet of text with text interpolation codes. Then store the localizable text in a table, localize the table, and then use Snap text formatting rules like the "format text... from..." rule to place the localized text into your image.
Related Topics
- Powerful text formatting is available in Snap to help you create your SVG dynamically.
- Exports let you convert one Output document into many other formats which are more useful.
- SVG graphics can also be used in your configurator as it runs on-screen. On-screen SVG graphics appear in SVG Viewer elements, and can be interactive.
While we invite innovative use of this element, be aware that...
- The use of some SVG features which work today may be disabled in the future if they cause performance, usability, or security problems. Use our preview site to test platform updates safely.
- You should carefully test your SVG as an output document, rendering it often as you develop it, to quickly find any SVG attribute that doesn't render as you expected.
- Epicor CPQ is built on Snap, our easy-to-use visual language. We cannot support or troubleshoot questions you may have in other languages you use alongside or within Epicor CPQ, such as SVG syntax.