`. You can target individual artifacts with custom CSS to override global scaling behavior.
```html
```
```css
/* styles/custom.css */
.wide-diagram {
--archify-artifact-max-width: 900px;
}
.wide-diagram svg {
max-height: 600px;
}
```
- The `--archify-artifact-max-width` variable is referenced by Archify's default stylesheet in **[`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html)**
- Additional rules like `max-height` prevent excessively tall diagrams on landscape-oriented viewports
- These overrides layer on top of the viewBox-derived scaling, preserving aspect ratio
This approach is ideal for edge cases—such as hero diagrams or mobile-optimized graphics—that need sizing exceptions without altering the global configuration.
---
## Build Integration Example
Wire everything together in your build script:
```js
// build.js
const archify = require("archify");
const config = require("./archify.config.js");
archify.build({
src: "./src/artifacts",
out: "./dist",
config,
});
```
Archify's build process (implemented in the repository's core scripts) performs these steps:
1. Reads each SVG from `src`
2. Applies `artifactViewBox` rules to normalize or preserve viewBox attributes
3. Generates responsive wrappers using the template in **[`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html)**
4. Injects CSS custom properties from `cssVariables`
5. Writes final HTML to `out`
---
## Method Comparison
| Approach | Best For | Trade-off |
|----------|----------|-----------|
| **Explicit SVG viewBox** | Full control over each artifact | Requires editing source files |
| **`artifactViewBox` config** | Consistent behavior across many files | May mask intentional design variations in source SVGs |
| **CSS overrides** | One-off exceptions or responsive breakpoints | Adds maintenance overhead for large projects |
For production sites, combine all three: explicit viewBox attributes for precision, `"fixed"` mode as a safety net, and CSS overrides for specific layout contexts.
---
## Summary
- **Add `viewBox="0 0 W H"`** to every SVG artifact for reliable, native browser scaling
- **Configure `artifactViewBox`** in [`archify.config.js`](https://github.com/tt-a1i/archify/blob/main/archify.config.js) to set fallback dimensions when viewBox is absent
- **Use CSS custom properties** and wrapper classes to constrain maximum sizes without distorting aspect ratios
- Archify's responsive behavior is controlled through [`archify.config.js`](https://github.com/tt-a1i/archify/blob/main/archify.config.js), [`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html), and per-artifact CSS
---
## Frequently Asked Questions
### What happens if my SVG has no viewBox and I don't configure `artifactViewBox`?
Archify falls back to inferring dimensions from `width` and `height` attributes, then applies a default coordinate system. This often causes unexpected cropping or scaling on mobile devices. Set `mode: "fixed"` with a `defaultBox` to ensure consistent rendering.
### Can I use different viewBox settings for different artifact categories?
Yes. Organize artifacts into subdirectories, create separate Archify build configurations for each, and run multiple builds with distinct `artifactViewBox` settings. Alternatively, use CSS overrides per class for simpler cases.
### Where does Archify apply the responsive CSS?
The wrapper styles are defined in **[`scripts/start-template.html`](https://github.com/tt-a1i/archify/blob/main/scripts/start-template.html)**, which serves as the HTML template for artifact injection. The `.archify-artifact` class receives `width: 100%` and `height: auto`, while CSS variables like `--archify-artifact-max-width` cap the visual size.
### Does Archify support viewBox animations or JavaScript manipulation?
Archify processes artifacts at build time, so runtime JavaScript modifications to viewBox attributes require client-side code. The generated SVG elements are standard DOM nodes—you can target them with `document.querySelector` and update viewBox dynamically after page load.