Embedded publish SVG: handy for CMS, wikis, and component docs—watch sanitizers, mail clients, and base64 weight
`embedded-image-psd-svg` helps when one markup blob must render inside documentation stacks; PNG payloads may be external or data URIs with very different CSP, cache, and mail implications. Promoting the same file to an LCP hero without byte budgeting will hammer TTFB and HTML weight.
使用方法
- Read the host’s SVG allow-list, `href` rules, and sanitizer behavior, then save once in staging so `<image>` survives round-trips.
- Apply `max-width` and `sizes` caps, verify `naturalWidth` against max CSS width times DPR, and prepare PNG fallbacks for email channels.
- Mark decorative previews with `aria-hidden` or empty `alt` per policy; informational graphics need real alt text—do not label a marketing hero as “preview” to dodge accessibility.
PSD to SVG (embed) FAQ
CMS responsive columns stretch the SVG wide and expose mosaic—template fix, source pixels, or both?
Do both: cap CSS width with `max-width`/`sizes`/`srcset` thinking, and ensure embedded pixels ≥ max display width × DPR. CSS-only fixes still blur when the bitmap is tiny; pixel-only fixes waste bandwidth if the container is unbounded.
WYSIWYG sanitizers strip our SVG to blank shells—product bug or expected security?
Expect aggressive stripping of `foreignObject`, remote refs, and sometimes `<image>`; host files on a trusted static origin and reference via `<img>` or iframe instead of pasting full SVG into the editor. If inline is mandatory, work with security on allow-lists and regression-test save/publish.
Outlook and some webmail choke on SVG—how do we ship without double design systems?
Default to PNG fallbacks for mail, treat SVG as progressive enhancement, and publish a short client capability matrix so marketing knows where animation dies. Do not blame engineering when a client simply lacks SVG support.
Massive PNG base64 inside SVG inflates HTML—how do we split for SEO and TTFB?
Move bytes to fingerprinted static URLs with long-lived cache headers; keep HTML lean. Reserve base64 for offline bundles, strict single-file archives, or compliance-mandated inline artifacts—and enforce a hard kilobyte ceiling.
Accessibility audits demand alt text—are decorative preview SVGs exempt?
Purely decorative previews that duplicate nearby copy should use `aria-hidden="true"` or `role="img"` with empty `alt` so screen readers skip noise. Charts or textual posters inside the SVG need meaningful alt or adjacent text—calling everything “preview” is not a waiver.