SVG Viewer Online

SVG Viewer: Render, Inspect, and Understand SVG Files

SVG (Scalable Vector Graphics) files are XML-based text files that describe two-dimensional graphics using geometric shapes, paths, text, and styling. Unlike raster images (JPEG, PNG, WebP), SVGs contain mathematical descriptions of shapes that render perfectly at any size "” from a 16×16 favicon to a 4K billboard, the same SVG file produces crisp, artifact-free output. Our SVG Viewer renders SVG markup in real time, displays the source code with syntax highlighting, and provides detailed information about the SVG's structure, dimensions, and element tree.

SVG files are used for logos, icons, illustrations, data visualizations, UI elements, animations, and interactive graphics. Understanding how to read, write, and debug SVG markup is a valuable skill for frontend developers, designers who work with web deliverables, and anyone who needs to inspect or modify vector graphics programmatically.

A History of SVG

The SVG format was developed by the W3C (World Wide Web Consortium) in the late 1990s as an open standard for vector graphics on the web. The first SVG specification (1.0) was published as a W3C Recommendation in September 2001. The format was designed to provide a resolution- independent alternative to raster images for logos, icons, and diagrams on the web.

SVG adoption was slow throughout the 2000s. Internet Explorer did not support SVG natively until IE9 (2011), requiring plugins (Adobe SVG Viewer) for earlier versions. Firefox added basic SVG support in version 1.5 (2005), and Safari added it in 3.0 (2007). The turning point came with the proliferation of retina/HiDPI displays starting with the iPhone 4 in 2010, which made the limitations of raster icons immediately visible. SVG became the preferred format for icons and logos as developers sought resolution-independent alternatives.

SVG 1.1 (second edition, 2011) is the current widely-supported specification. SVG 2 is in development with additional features including better integration with CSS and HTML, but has limited browser support in 2025. Most SVG files in production use SVG 1.1 features.

The SVG Document Structure

Every SVG document has a root <svg> element with namespace and dimension declarations, followed by child elements describing the graphic content:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
>
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M12 4v16m8-8H4"/>
</svg>

xmlns

The xmlns="http://www.w3.org/2000/svg" attribute declares the SVG namespace. Required for standalone SVG files (.svg) parsed as XML. Optional when SVG is inline in an HTML5 document (the HTML parser infers the namespace), but harmless to include.

viewBox

The viewBox attribute defines the internal coordinate system: viewBox="min-x min-y width height". All shapes within the SVG use coordinates relative to this coordinate system. The viewBox enables SVG scaling: a SVG with viewBox="0 0 24 24" can be displayed at any pixel size by setting CSS width and height "” the browser scales the coordinate system to fit. Without viewBox, SVGs render at fixed pixel dimensions.

width and height

The intrinsic dimensions of the SVG. When SVG is used as an <img> or background image, these set the default size. When SVG is inline in HTML, CSS width/height override these values. Setting width="100%" on inline SVG (without height) can cause sizing issues; use viewBox with CSS sizing instead.

SVG Shape Elements

SVG provides six basic shape elements plus the general-purpose path element:

<path> "” The Universal Shape

The <path> element draws arbitrary shapes using a mini-language of commands in the d attribute. Path commands:

• M x,y: move to (starts a new subpath without drawing)
• L x,y: line to
• H x: horizontal line to
• V y: vertical line to
• C x1,y1 x2,y2 x,y: cubic Bézier curve
• S x2,y2 x,y: smooth cubic Bézier (inferred first control point)
• Q x1,y1 x,y: quadratic Bézier curve
• T x,y: smooth quadratic Bézier
• A rx,ry x-rotation large-arc-flag sweep-flag x,y: elliptical arc
• Z: close path (draw line back to start of current subpath)

Uppercase commands use absolute coordinates; lowercase commands use relative coordinates (relative to the current cursor position). Using relative commands results in more compact path data because coordinate values are smaller numbers.

<rect>

Draws a rectangle. Attributes: x, y (top-left corner), width, height, rx, ry (border radius). Both rx and ry are set: creates an elliptical border radius. Only rx is set: ry defaults to rx.

<circle>

Draws a circle. Attributes: cx, cy (center coordinates), r(radius).

<ellipse>

Draws an ellipse. Attributes: cx, cy (center), rx (horizontal radius), ry (vertical radius).

<line>

Draws a straight line. Attributes: x1, y1 (start point), x2, y2 (end point). Only visible with a stroke; no fill.

<polyline>

Draws a series of connected line segments (open polygon). Attribute: points(space or comma-separated list of x,y coordinate pairs).

<polygon>

Like polyline but closed "” the last point connects back to the first. Attribute: points.

SVG Text

The <text> element renders text within SVG. Key attributes: x, y (anchor position), text-anchor (start, middle, end "” controls horizontal alignment relative to x), dominant-baseline (controls vertical alignment), font-family, font-size, fill.

<text
  x="50%"
  y="50%"
  text-anchor="middle"
  dominant-baseline="middle"
  font-family="sans-serif"
  font-size="16"
  fill="#333"
>
  Hello SVG
</text>

SVG text uses the system's installed fonts or web fonts loaded via <style>. For icons and logos, "outline text" (converting text to paths) is preferred for guaranteed rendering consistency, though it prevents text selection and accessibility.

SVG Styling: Presentation Attributes vs CSS

SVG elements can be styled in three ways:

Presentation Attributes

Style properties written directly as XML attributes on elements: fill="red", stroke="black", stroke-width="2". These are the most portable and have good browser support. They can be overridden by CSS.

Inline Style

The HTML style attribute syntax works in SVG: style="fill: red; stroke: black;". Inline styles override presentation attributes.

CSS Style Sheets

SVG elements can be targeted with CSS, either in a <style> block inside the SVG or from an external stylesheet (when SVG is inline in HTML). CSS takes precedence over presentation attributes. This is the most powerful styling approach and enables themes, hover effects, and animations:

<style>
  .icon { fill: currentColor; }
  .icon:hover { fill: blue; }
</style>

The currentColor value is especially useful for icon SVGs "” it inherits the text color of the parent element, allowing icon color to be controlled entirely by CSS color property.

SVG Gradients and Patterns

Linear Gradients

<defs>
  <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#0066ff"/>
    <stop offset="100%" stop-color="#00ccff"/>
  </linearGradient>
</defs>
<rect fill="url(#grad)" width="200" height="100"/>

Radial Gradients

<defs>
  <radialGradient id="rgrad" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="white"/>
    <stop offset="100%" stop-color="#0066ff"/>
  </radialGradient>
</defs>

Patterns

<defs>
  <pattern id="dots" x="0" y="0" width="10" height="10"
    patternUnits="userSpaceOnUse">
    <circle cx="5" cy="5" r="2" fill="#ddd"/>
  </pattern>
</defs>
<rect fill="url(#dots)" width="100%" height="100%"/>

SVG Filters

SVG's filter primitives system provides powerful image processing effects:

<defs>
  <filter id="blur">
    <feGaussianBlur stdDeviation="3"/>
  </filter>
  <filter id="shadow">
    <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.3"/>
  </filter>
</defs>
<circle filter="url(#blur)" cx="50" cy="50" r="40"/>

Available filter primitives include: feGaussianBlur (blur), feDropShadow, feColorMatrix (color transforms), feMorphology(expand/contract), feComposite (blend two sources), feTurbulence(noise/texture), feDisplacementMap, feFlood, and more. Filters can be chained: the output of one primitive feeds the input of the next via in and result attributes.

SVG Animations

SVG supports two animation approaches:

CSS Animations on SVG Elements

The preferred approach. All CSS animation properties work on SVG elements including transform, opacity, fill, stroke, and more. CSS animations are GPU-accelerated and composited without layout recalculation:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  transform-origin: center;
  animation: spin 1s linear infinite;
}

SMIL Animations (Deprecated)

SVG has its own animation system based on SMIL (Synchronized Multimedia Integration Language) using elements like <animate>, <animateTransform>, and <animateMotion>. SMIL animations work without JavaScript and are self-contained in the SVG file, but Chrome deprecated support for SMIL animations in 2015 (and later reversed the removal). CSS animations are the recommended alternative for new projects.

SVG Accessibility

Making SVGs accessible requires explicit effort:

• Informative SVGs (icons, logos, diagrams): add role="img" to the <svg> element, a <title> as the first child, andaria-labelledby pointing to the title's ID.
• Decorative SVGs (purely visual, accompanied by visible text): add aria-hidden="true" so screen readers skip them.
• Interactive SVGs: buttons and links within SVGs need appropriate ARIA roles and keyboard event handlers.
• Complex infographics: provide a text alternative (in a caption or aria-describedby linked element) summarizing the data for screen reader users.

SVG Clipping and Masking

SVG clipping (<clipPath>) and masking (<mask>) control the visibility of elements:

<!-- Clip to a circle -->
<defs>
  <clipPath id="circle-clip">
    <circle cx="50" cy="50" r="40"/>
  </clipPath>
</defs>
<image href="photo.jpg" clip-path="url(#circle-clip)"
  width="100" height="100"/>

<!-- Gradient mask for fade effect -->
<defs>
  <mask id="fade">
    <linearGradient id="g">
      <stop offset="0" stop-color="white"/>
      <stop offset="1" stop-color="black"/>
    </linearGradient>
    <rect fill="url(#g)" width="100" height="100"/>
  </mask>
</defs>
<rect mask="url(#fade)" fill="blue" width="100" height="100"/>

Using SVG in HTML

SVG can be used in HTML in several ways, each with different trade-offs:

• Inline SVG: SVG markup embedded directly in the HTML document. Allows full CSS access, JavaScript access, and no extra HTTP request. The SVG inherits the document's CSS context. Best for icons, logos, and interactive graphics.
• <img src="icon.svg">: SVG as an external image. Cached by the browser. No access to the SVG's internal elements from CSS or JavaScript. Scripts inside the SVG do not execute. Good for decorative images and when caching is important.
• CSS background-image: SVG as a background. Same limitations as <img>. Good for decorative backgrounds and pseudo-element icons.
• <object type="image/svg+xml">: SVG with its own browsing context. Scripts inside execute. Limited CSS inheritance from parent. Rarely used in modern development.

Debugging SVG

Browser DevTools provide full SVG debugging capabilities. SVG elements appear in the HTML Element panel with their attributes and computed styles. Key debugging techniques:

• Inspect the viewBox to understand the coordinate system.
• Select individual path elements and highlight their bounding boxes.
• Check for overflow: hidden hiding content outside the viewBox.
• Verify that fill and stroke values are applied correctly (check the cascade "” CSS overrides presentation attributes).
• Use the Computed panel to see currentColor resolved values.
• For animation issues, use the Chrome Animations panel to slow down and inspect CSS animations on SVG elements.

How to Use This SVG Viewer

Paste SVG markup into the editor or upload an SVG file. The viewer renders the SVG in real time with a live preview. The source panel shows syntax-highlighted XML with collapsible element trees for easy navigation of complex SVGs. Metadata is extracted and displayed: file size, viewBox dimensions, element count breakdown (paths, shapes, groups, defs). Toggle between a white, black, or transparent background to check how the SVG renders against different contexts. The viewer is entirely client-side "” your SVG data never leaves your browser.