How do you map mouse click coordinates to internal SVG coordinates?

Use the SVG DOM API: create an SVG point `pt = svg.createSVGPoint()`, set `pt.x = event.clientX; pt.y = event.clientY`, and call `pt.matrixTransform(svg.getScreenCTM().inverse())`.

Updated: August 2026 • Verified v1.2

SVG ViewBox & PreserveAspectRatio Coordinate Calculator

Creative & DesignDesign

Local Browser Execution: Your input is processed locally in your browser and is not sent to UTL servers.

Scale_Meet = Min(ContainerW/ViewW, ContainerH/ViewH); Scale_Slice = Max(ContainerW/ViewW, ContainerH/ViewH)

Was this calculation helpful?

Understanding Your Results

Calculates effective scale factor, rendered content dimensions, formats the complete SVG tag header, and provides production-ready JavaScript code for mapping screen clicks `(clientX, clientY)` to internal SVG coordinates via `getScreenCTM().inverse()`.

Practical Guidance & Next Steps

`xMidYMid meet` fits the entire viewBox inside the container (like CSS `object-fit: contain`), while `xMidYMid slice` covers the container and clips overflow (like CSS `object-fit: cover`).

What is this?

A vector graphic utility that calculates SVG viewBox scaling behavior and coordinate transforms across responsive containers.

How does it work?

1. Enter internal viewBox dimensions (minX, minY, width, height). 2. Enter outer container dimensions (width, height in px). 3. Select scale mode (meet, slice, none) to view effective dimensions and copy coordinate transform code.

Why use it?

Eliminates confusion around SVG responsive scaling and click-coordinate calculations.

Technical Scope & Calculation Limitations

Calculates standard SVG 1.1 / 2.0 viewport and coordinate mapping specifications.

Frequently Asked Questions

`meet` scales the viewBox so the entire graphic is visible inside the viewport (equivalent to CSS `contain`), potentially letterboxing. `slice` scales the viewBox to completely cover the viewport (equivalent to CSS `cover`), clipping any parts that exceed the bounds.

Windows Desktop & Widget Options