SVG视口坐标系工作原理及默认视口尺寸咨询

Let's break down your two core questions about SVG coordinate systems, using your code examples to clarify each behavior clearly:

1. What's the default viewport size for an SVG? #

When you don’t specify width and height attributes on the <svg> element, the default viewport dimensions are 300px (width) × 150px (height). This is a standard defined in the SVG specification—any content outside this 300×150 boundary gets clipped, which matches what you observe in your first two code examples.

Example Breakdown: No Viewport or ViewBox #

<!-- Default 300×150 viewport -->
<svg style="border-style: dotted">
  <ellipse cx="50" cy="50" rx="50" ry="50"></ellipse>
</svg>

Here, the ellipse is centered at (50,50) with a radius of 50—so it fills the top-left quadrant of the default viewport, appearing as a half-circle.

<!-- Default viewport with a huge ellipse -->
<svg style="border-style: dotted">
  <ellipse cx="50" cy="50" rx="1500" ry="1500"></ellipse>
</svg>

The ellipse is massive, but only the portion within the 300×150 viewport is visible. Since the center is at (50,50), you’re seeing a tiny slice of the ellipse’s top-left quadrant.

2. Why does the SVG appear "large" when using viewBox without a viewport? #

When you specify a viewBox but omit width and height, the SVG element automatically scales to fill its parent container’s available space, while maintaining the aspect ratio defined by the viewBox. This is why those examples look enlarged—the SVG isn’t stuck at the default 300×150; it’s expanding to fit whatever space its parent (like the <body>) provides.

Example Breakdown: ViewBox Without Viewport #

<!-- viewBox="0 0 50 50" (1:1 aspect ratio) -->
<svg viewBox="0 0 50 50" style="border-style: dotted">
  <ellipse cx="50" cy="50" rx="50" ry="50"></ellipse>
</svg>

The viewBox defines an internal coordinate system of 50 units wide × 50 units tall. Since no width/height is set, the SVG scales to fit the parent’s width (e.g., your browser window width) while keeping a 1:1 aspect ratio. If your browser is 1000px wide, the SVG becomes 1000px × 1000px—making the ellipse (which spans from (0,0) to (100,100) in viewBox coordinates) appear huge.

Another example:

<svg viewBox="20 20 100 100" style="border-style: dotted">
  <ellipse cx="50" cy="50" rx="50" ry="50"></ellipse>
</svg>

Here, the viewBox starts at (20,20) and spans 100×100 units. The ellipse is centered at (50,50) (30 units right/down from the viewBox’s origin) with radius 50—so it extends from (0,0) to (100,100) relative to the viewBox. Again, the SVG scales to fill the parent container, hence the large appearance.

Quick Recap #

• Viewport: The visible "window" of the SVG, defined by width/height (default 300×150).
• ViewBox: Defines the SVG’s internal coordinate system. If no viewport is set, the SVG scales to fit its parent while preserving the viewBox’s aspect ratio.

内容的提问来源于stack exchange，提问作者Manu Chadha