SVG vs PNG Graphics in Tridium Niagara

Version: Niagara 4
Type: Graphics
Difficulty: Beginner

Overview

Choosing the right image format for Niagara graphics significantly impacts performance, scalability, and visual quality. This guide compares SVG and PNG formats to help you make informed decisions for your PX graphics and Reflow projects.

What You'll Learn

• Understand SVG and PNG characteristics
• Choose the right format for each use case
• Optimize graphics for Niagara performance
• Work with vector vs raster graphics

Format Comparison

Characteristic	SVG (Vector)	PNG (Raster)
Scalability	Infinite, no quality loss	Fixed resolution, pixelates
File Size	Small for simple shapes	Can be large for high-res
Editing	Easily modified with code	Requires image editor
Transparency	Native support	Native support
Animation	Supported via CSS/JS	Not supported
Complexity	Best for geometric shapes	Best for photos/gradients

When to Use SVG

Ideal for:

• Icons and symbols (valves, dampers, fans)
• Floor plans and building diagrams
• Custom buttons and UI elements
• Animated status indicators
• Schematic diagrams

SVG Advantages in Niagara:

<!-- Example: Simple valve icon -->
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="none" stroke="#333"/>
  <line x1="10" y1="50" x2="90" y2="50" stroke="#333"/>
</svg>

• Scales perfectly on any screen size
• Can be styled with CSS
• Elements can be bound to points
• Small file sizes for fast loading

When to Use PNG

Ideal for:

• Equipment photos
• Complex background images
• Screenshots and documentation
• Images with many colors/gradients
• Imported CAD renderings

PNG Considerations:

• Create at 2x resolution for retina displays
• Compress using tools like TinyPNG
• Use appropriate color depth (8-bit vs 24-bit)

Niagara-Specific Recommendations

PX Graphics Editor:

• Use SVG for all equipment symbols
• Import PNG for background images
• Keep symbol libraries in SVG format

Reflow HTML5:

• SVG preferred for scalable UI
• Use CSS sprites for repeated icons
• Lazy-load large PNG backgrounds

Optimization Tips

1. SVG Optimization:

   • Remove unnecessary metadata
   • Simplify paths with SVGO
   • Use symbols and references for repeated elements

2. PNG Optimization:

   • Compress without visible quality loss
   • Use indexed color for simple graphics
   • Consider WebP for modern browsers

File Size Guidelines

Element Type	Recommended Format	Target Size
Icons	SVG	<5 KB
Floor plans	SVG	<50 KB
Equipment photos	PNG/JPG	<200 KB
Background images	PNG/JPG	<500 KB

Best Practices

• Maintain a symbol library in SVG format for consistency
• Test on target devices to verify rendering performance
• Use appropriate compression to balance quality vs. size
• Consider mobile devices with limited bandwidth

Related Topics

• PX Graphics Editor Tutorial
• Reflow Graphics Development
• Niagara Web Performance Optimization