As SCADA/HMI designers, we often hit limitations when relying only on built-in Ignition Perspective components. They work well for simple displays, but once you begin building more expressive Level 2 or Level 3 screens, or want to match ISA-101, brand styles, or custom industrial equipment shapes, you need more flexibility than the default widgets can provide.

That’s where custom SVGs become essential.

Working directly with SVG shapes gives complete control over:

• Dynamic positioning
• Fill levels
• Stroke thickness
• Color palettes
• Rounded corners
• Animation behaviors
• Opacity and layering
• Masking for irregular vessel shapes

If you want to make flexible, modern, operator-friendly HMIs, you must understand how to manipulate SVG elements under the hood — not as code, but as design primitives.

This case study shows how I designed a reusable Dynamic Rectangle Indicator for gauges, bar charts, and tank level fills using SVG elements in Ignition Perspective.
I’m intentionally not sharing the implementation logic (this is part of my portfolio), but I’ll show the structure, the values, and the design principles behind it.

The Dynamic Rectangle Concept

At the core of this display is a simple idea:

A rectangle’s height or width can represent a process value.

If a bar needs to “fill up,” you change its height.
If a bar needs to “progress forward,” you change its width.

Rectangles are ideal for:

• tank levels
• vertical bar indicators
• horizontal trends
• container fills
• material quantities
• flow progress
• production counts

The key SVG attributes used for the design are:

x, y          → position inside the SVG  
width, height → dynamic fill size  
rx, ry        → rounded corners  
fill          → color  
opacity       → shading and layering  

In Perspective, these values can be made dynamic, enabling smooth animation or live process updates.

Vertical Multi-Level Bar Indicator

One version of the dynamic rectangle appears as a stacked vertical bar with segments:

• Red
• Green
• Yellow

Each bar represents a different percentage or count.
Below the bars, numeric values remain fixed for operator reference.

Example static SVG values:

x = varies
y = varies
width  = fixed
height = dynamic (0–100%)
rx = 4 (rounded)
fill = color of the segment

This design is intentionally clean and color-muted to align with ISA-101 principles.

Horizontal Progress Bars

Another variation uses horizontal dynamic rectangles for process values:

• Top bar: purple
• Bottom bar: blue

These bars sit on a darker background rectangle, creating a high-contrast indicator that operators can understand instantly.

Example static SVG values:

x = 0
y = centered
height = fixed
width = varies (0–100%)
rx = 10 (capsule shape)

Horizontal fills are ideal for:

• valve position
• actuator travel
• conveyor load
• percentage-based KPIs

Tank Level Fill (Irregular Vessel Shape)

The most interesting application is the tank level gauge:

• A custom-drawn tank outline
• A diagonal internal boundary
• Smooth rounded outer edges
• A dynamic blue fill that rises or falls
• A numeric label such as “38 L”

This is where SVG truly shines — you can draw any vessel geometry you want.

The fill rectangle sits behind the tank’s path stroke and increases in height based on the volume.

Example static SVG values:

x = fixed
y = varies (moves upward as tank fills)
width  = fixed
height = dynamic
fill = light blue
opacity = 0.8

Because the tank is an SVG path, the fill rectangle blends seamlessly into the shape — without needing masks, clipping paths, or bitmap images.

Why Use SVG Rectangles Instead of Built-In Components?

Because rectangles give you:

✔ Full design flexibility

You’re not restricted by component styling, sizing, or behavior.

✔ Adaptive shapes

Can fit into vessels, silos, pits, custom equipment icons, etc.

✔ Ultra-clean UI

Perfect for ISA-101 grey-style HMIs.

✔ Reusable logic

The same rectangle system can be used for:

• tanks
• bar charts
• sliders
• KPIs
• status indicators

✔ Portfolio-grade visuals

Your work stands out from template-based HMIs.

Understanding these SVG properties makes you a stronger SCADA/HMI developer.
It’s not about replacing components — it’s about expanding what you can design.

Final Thoughts

This dynamic rectangle gauge is one of the foundational building blocks for modern SCADA visualization. With just a few adjustable SVG properties, you can create:

• Horizontal and vertical progress indicators
• Tank fills with custom shapes
• Multicolor status bars
• Layered containers with shading
• Minimalist, high-performance HMIs

If you’d like to know how I implemented the bindings, animations, or parameter structure behind these indicators, feel free to ask — especially if you’re reviewing my portfolio or interviewing me. 😊

This part of my work is intentionally shown visually, not explained step-by-step.