Charts rendered by semiotic/server use inline SVG attributes — no external CSS, no JavaScript. This means they work in email clients that strip<style> tags and <script> elements.
The preview below simulates an email with an embedded chart. Toggle "email-safe mode" to strip class attributes — the chart looks identical because all styling is already inline.
Standard SVG mode
Weekly Performance Update - March 31
From: analytics@company.com
To: team@company.com
Here's this week's performance summary. Revenue continues to trend upward, with the North region leading growth.
This chart was generated server-side using semiotic/server. No JavaScript required to display it.
SVG size: 4.2KB (standard)
How it works
Email clients (Gmail, Outlook, Apple Mail) support inline SVG with inline attributes. They strip <style>, <script>, and most class attributes. Semiotic's server rendering already uses inline attributes for everything — fill, stroke, font-size, font-family — so the output is email-safe by default.
Integration example
JS
import { renderChart } from "semiotic/server" import { sendEmail } from "./mailer" const chart = renderChart("BarChart", { data: weeklyData, categoryAccessor: "region", valueAccessor: "revenue", title: "Weekly Revenue", theme: "light", width: 480, height: 280, }) await sendEmail({ to: "team@company.com", subject: "Weekly KPI Report", html: ` <p>Here's this week's performance summary.</p> ${chart} <p style="font-size:11px;color:#999"> Generated by semiotic/server </p> `, })
Tips for email SVGs
- Keep chart width under 600px — most email clients have a ~600px content area.
- Use the
light theme — dark backgrounds can clash with dark-mode email clients. - Add
title for accessible alt text in email. - SVG is typically 2-8KB — much smaller than equivalent PNG images.
- Test with Litmus or Email on Acid for client-specific rendering quirks.