What the SVG coordinate calculator is doing
An SVG has at least two coordinate spaces. Its viewport is the rectangle the browser lays out in CSS pixels. Its viewBox is the internal rectangle where paths, shapes, and points are defined. A viewBox="0 0 240 160" rendered into a 480 by 320 pixel viewport has a scale of two pixels per SVG unit.
That simple ratio changes when the two rectangles have different aspect ratios. The default xMidYMid meet rule chooses the smaller scale, keeps the whole viewBox visible, and centers the unused space. The slice rule chooses the larger scale, fills the viewport, and crops the excess. The none rule stretches x and y independently.
Formulas for converting SVG and viewport points
Once scale and alignment offset are known, an SVG point becomes a viewport point with these formulas:
viewportX = offsetX + (svgX - minX) * scaleX
viewportY = offsetY + (svgY - minY) * scaleYTo reverse the conversion, remove the offset, divide by scale, and restore the viewBox minimum:
svgX = minX + (viewportX - offsetX) / scaleX
svgY = minY + (viewportY - offsetY) / scaleYBrowser pointer events report client coordinates relative to the page, not automatically relative to the SVG. Subtract the SVG element's bounding rectangle before entering a pointer position here. In application code, getScreenCTM().inverse() is often the safest general conversion because it also accounts for transforms elsewhere in the document.
Worked example with letterboxing
Suppose a viewBox="0 0 200 100" is shown in a 300 by 300 pixel viewport with xMidYMid meet. The horizontal scale is 1.5, while the vertical candidate is 3. Meet chooses 1.5, producing artwork that is 300 pixels wide and 150 pixels tall. Center alignment places 75 pixels of empty space above it.
The SVG point 100,50 maps to viewport point 150,150. A viewport point at 150,75 maps to SVG point 100,0. A viewport point above y 75 is in the letterboxed region and converts to a negative SVG y value, which correctly indicates that it lies outside the visible viewBox.
When CSS changes the viewport
CSS width and height define the rendered viewport even when the SVG element also has width and height attributes. Responsive layouts can therefore change the coordinate mapping without changing any path data. Measure the element at the moment of interaction, especially after resizing, zooming, or changing device orientation.
The CSS view-box property is different from the SVG viewBox attribute and still has limited practical use compared with the established attribute. For normal inline SVG work, set the SVG attribute and use CSS for the displayed size. Read the full SVG viewBox guide for cropping, whitespace, and responsive sizing patterns.
SVG coordinate questions
What is the difference between an SVG viewport and viewBox?
The viewport is the displayed CSS pixel area. The viewBox is the internal SVG coordinate rectangle mapped into that area. A viewport can resize while the path coordinates remain unchanged.
How do I convert a screen point to SVG coordinates?
First express the point relative to the SVG viewport by subtracting its bounding rectangle. Then remove alignment offset, divide by rendered scale, and add the viewBox minimum. Use an inverse screen transformation matrix when ancestor transforms are involved.
Why do meet and slice give different coordinates?
Meet uses the smaller uniform scale and may add empty space. Slice uses the larger uniform scale and may crop content. Their scale and alignment offsets can therefore map the same viewport pixel to different SVG coordinates.
Apply the coordinates to a real file
Open the free SVG editor to inspect a file's viewBox, move shapes, and edit point coordinates while watching the rendered result.