You can render data-driven Scalable Vector Graphics (SVG) in a MDriven Designer ViewModel when you need compact graphics such as indicators, progress displays, charts, and diagrams in the web UI or VPF prototyper.
Use SVG as ViewModel data
SVG is an XML-based graphics format. Instead of storing a PNG or JPEG image, you store SVG markup in a string-valued ViewModel column. MDriven interprets that string as SVG when the column has the Eco.BlobType tagged value set to SVG.
This is useful when the graphic must reflect model data. For example, a status field can produce a green circle when an item is complete and a gray circle when it is not.
Configure the ViewModel column
- In MDriven Designer, add a display column to the ViewModel.
- Select the column and add the tagged value
Eco.BlobType. - Set the tagged-value value to
SVG. - Set the column value to a string that contains valid SVG markup.
- Save the model and run the view in the web UI or VPF prototyper.
When the renderer sees Eco.BlobType=SVG, it renders the column content as SVG rather than presenting the string as text.
| Column setting | Meaning | Example |
|---|---|---|
Eco.BlobType=SVG
|
Treat the string value as SVG graphics. | A ViewModel column whose value starts with <svg ...>.
|
Eco.BlobType=Image
|
Treat the value as an image blob, such as PNG or JPEG data. | A stored photograph. |
Eco.BlobType=Blob
|
Treat the value as non-specific binary data. | A document or other binary content. |
Start with a small SVG
Use valid SVG markup as the value of the column. The following example draws a green status dot:
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="8" fill="green" />
</svg>
Paste the markup into a test value first. If it renders, move the markup into the expression or model logic that creates the column value.
SVG has primitives such as circle, rect, ellipse, line, and text. These are often easier to generate than image data. SVG editors may instead create path elements; those are also valid SVG but can be harder to read and modify.
Make the graphic respond to model data
Because SVG is stored as a string, you can construct it from ViewModel data. Use OCL expressions or derived attributes to insert values and choose optional SVG fragments.
For example, an availability indicator can always show one heart and show a second heart only when a numeric value exceeds two. Build the SVG from a fixed opening fragment, a conditional fragment, and a closing fragment. Keep the SVG structure valid in both cases.
A progress display can use a rectangle whose width is calculated from a percentage:
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="16" viewBox="0 0 120 16">
<rect x="0" y="0" width="120" height="16" fill="lightgray" />
<rect x="0" y="0" width="72" height="16" fill="green" />
</svg>
In this example, 72 is the generated width. If the model value is 60 percent, generate a width of 72 for a 120-unit bar. Put repeated or substantial generation logic in a derived attribute or shared model logic rather than making a ViewModel expression difficult to maintain.
Example: generate a compact bar chart
You can generate chart elements by collecting grouped model data and emitting one rect element for each group. A training example groups cars by brand and creates SVG axes, labels, and bars from the resulting values. See Training:Bootcamp: Chapter 13 - Code Snippet for the complete expression and Training:Bootcamp:Chapter 13 for the related training chapter.
SVG is well suited to small charts in lists and dashboards because it is text-based and remains precise when enlarged. Typical uses include:
- Completion and readiness indicators.
- Small pie charts, bar charts, and trend diagrams.
- A notification dot or other conditional overlay graphic.
- Generated reports where text, lines, and shapes are emitted as SVG.
Style inline SVG
An SVG supplied as ViewModel data is inline SVG. Inline SVG can react to styles applied to the component content. For example, define a style that sets a stroke or fill color, then assign that style through the ViewModel column's style reference. Changes to the applied style update the rendered inline SVG.
This differs from using an SVG as a static image reference. Styling the SVG content through the component-content style applies when the SVG is expanded as data in the ViewModel column, not when it is only a static image reference.
Test in each target UI
Test the completed view in every UI you plan to support.
- Run the ViewModel with a known SVG test value.
- Verify that the expected shapes, dimensions, and colors render correctly.
- Change the model data that controls the generated text or optional fragments.
- Confirm that the rendered graphic updates with the ViewModel data.
- If you apply a style reference, verify its fill and stroke behavior with the inline SVG data.
SVG data rendering is available in both the web UI and VPF prototyper. This makes it a useful common approach for simple graphics when you do not need a custom component.
Build and maintain SVG safely
Keep generated SVG small and organized.
- Start with a hand-tested SVG template, then replace only the values that must vary.
- Use SVG primitives where practical; they make generated markup easier to inspect.
- Ensure every conditional branch produces well-formed SVG. Do not conditionally omit a closing element that another fragment requires.
- Separate reusable chart or diagram generation from individual ViewModels when several views need the same graphic.
- Use a custom component when the required interaction or behavior exceeds what a generated SVG string can reasonably express.
For an example where SVG graphics react to mouse events and can be moved and saved, see Documentation:Complete model examples.