Loading comparison...
Loading comparison...
Scalable Vector Graphics — XML-based vector images. Supports all three diff modes: text (source), structural (DOM tree), and visual (rendered pixels).
The World Wide Web Consortium (W3C) published SVG (Scalable Vector Graphics) 1.0 in 2001 as an XML-based markup language for describing two-dimensional vector graphics. Unlike raster formats (PNG, JPEG, GIF) that store pixel grids, SVG defines images as mathematical shapes — paths, circles, rectangles, text, and groups — that render crisply at any size from thumbnail icons to billboard-scale displays. This resolution independence makes SVG the standard format for logos, icons, illustrations, data visualizations, maps, and any graphic that must display across devices with varying screen densities.
SVG's XML foundation means it integrates natively with web technologies: images can be embedded inline in HTML, styled with CSS (including animations and transitions), manipulated with JavaScript, and indexed by search engines. Icon libraries like Heroicons, Lucide, and Material Icons distribute their assets as SVG files, and design tools like Figma, Illustrator, and Inkscape export to SVG natively. The format supports gradients, clipping paths, masks, filters (blur, drop shadow, color matrix), pattern fills, and embedded fonts.
SVG animation is possible through SMIL, CSS keyframes, and JavaScript libraries like GSAP, Framer Motion, and Anime.js. Accessibility features include title and desc elements for screen readers and semantic grouping with role attributes. The dual nature of SVG — both a visual image and a structured XML document — means it uniquely benefits from three comparison modes: text diff of the source markup, structural DOM tree comparison, and visual pixel-level overlay of the rendered output.
SVG's dual nature as both source code and visual output means changes need both structural and visual comparison to fully assess. Comparing SVG files catches modified path data that alters icon shapes, changed viewBox attributes that affect scaling and positioning, altered CSS classes or inline styles that shift colors and layout, and removed accessibility elements like title and desc.
Design system teams maintaining icon libraries need visual diff to verify rendering alongside source diff to review the underlying markup changes that produced those visual differences.
UtraDiff provides triple-mode comparison for SVG files. Text source diff uses XML syntax highlighting to show raw markup changes. Structural DOM diff matches elements by tag name and attributes, isolating moved groups from content edits.
Rendered visual comparison rasterizes both SVGs and applies pixel overlay, heatmap, onion skin, and side-by-side modes. This triple approach catches changes invisible in any single mode — a CSS class rename shows in source, a path edit shows in visuals.
Supported extensions: .svg