---
title: "Build a Vite Plugin to Catch Broken SVG Assets Before Production"
url: https://daily.dev/posts/build-a-vite-plugin-to-catch-broken-svg-assets-before-production-ps89inq3t
source_url: https://www.sitepoint.com/build-a-vite-plugin-to-catch-broken-svg-assets-before-production
type: article
source: "SitePoint"
published: 2026-08-25T15:02:55.581Z
updated: 2026-08-25T15:11:27.780Z
tags: ["javascript", "devtools", "svg", "vite"]
reading_time: 17
upvotes: 0
comments: 0
language: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Build a Vite Plugin to Catch Broken SVG Assets Before Production

**[SitePoint](https://daily.dev/sources/sitepoint)** · 17 min read · 0 upvotes · 0 comments

## Summary

A step-by-step tutorial shows how to build a custom Vite plugin that scans a project's SVG assets, enforces rules like requiring a viewBox, banning script and foreignObject elements, and staying under a size budget, then blocks builds and warns during development when assets violate those rules. It covers structuring the plugin, hooking into buildStart and configureServer, making it configurable, extracting a reusable validation engine, and wiring the same checks into CI, framing the approach as turning tribal knowledge about asset requirements into an executable build contract.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://www.sitepoint.com/build-a-vite-plugin-to-catch-broken-svg-assets-before-production>

## Questions this post answers

### How do I write a Vite plugin that fails the build if an SVG file is missing a viewBox attribute?

Use a regex check inside a buildStart hook that reads each SVG file and tests for a viewBox attribute with /\bviewBox\s*=/i, pushing an error string if it's missing. Collect errors across all files, format them into a message, and call this.error(message) inside buildStart so Vite aborts the build when any file fails validation.

_See how daily.dev surfaces practical Vite plugin patterns for developers automating asset checks._

### How can I make Vite's dev server watch and validate specific asset files as they change?

Use the configureServer hook to access server.watcher, call server.watcher.add() on the target directory, then listen for the 'change' event. Inside the handler, filter for the relevant file extension and path prefix, run the validation function, and log formatted errors to the console without throwing, since dev feedback should be immediate rather than build-breaking.

_daily.dev helps developers tracking Vite plugin APIs like configureServer stay current on build tooling._

### What are reasonable deterministic rules to enforce on SVG assets in a frontend project?

Reasonable checks include requiring an svg root element, requiring a viewBox attribute, enforcing a file-size budget such as 100KB, and disallowing script and foreignObject elements for policy reasons. Additional rules can include banning embedded base64 raster images and requiring specific attributes like fill="currentColor" for design-system consistency.

_Developers defining asset policies can find similar build-tool patterns curated on daily.dev._

## Similar posts on daily.dev

- [Build a Vite plugin from scratch](https://daily.dev/posts/build-a-vite-plugin-from-scratch-ghvwrwdxi) · Flavio Copes · 7 upvotes · 1 comments
- [Embeddable Widgets with Vite, React, Tailwind 4 & Web Components](https://daily.dev/posts/embeddable-widgets-with-vite-react-tailwind-4-web-components-kmten04bk) · Viget · 8 upvotes · 1 comments

---

Tags: [#javascript](https://daily.dev/tags/javascript), [#devtools](https://daily.dev/tags/devtools), [#svg](https://daily.dev/tags/svg), [#vite](https://daily.dev/tags/vite)

[View this post on daily.dev](https://daily.dev/posts/build-a-vite-plugin-to-catch-broken-svg-assets-before-production-ps89inq3t)