Version: Niagara 4
Type: Graphics
Difficulty: Beginner
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.
| 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 |
Ideal for:
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>
Ideal for:
PNG Considerations:
PX Graphics Editor:
Reflow HTML5:
SVG Optimization:
PNG Optimization:
| 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 |