Record your screen with webcam and audio, and optimize SVGs offline

6 min read
screen recording
svg
optimization
privacy

Two everyday developer jobs, recording a quick demo and shipping lean icons, can both happen entirely in your browser. Nothing is uploaded.

Recording a demo with the Screen Recorder

The Screen Recorder asks the browser to share a tab, window or full screen. You can add:

  • Tab or system audio – sound from the shared tab (Chrome and Edge support this best).
  • Microphone – mixed with system audio into one track, with echo cancellation and noise suppression.
  • Webcam bubble – your camera is drawn into a corner of the video. You can move the corner while recording.

A 3 or 5 second countdown gives you time to switch windows, and Pause/Resume lets you skip boring parts. Pick WebM for the widest support or MP4 where your browser can encode it. Higher bitrates and 60 fps look sharper but create bigger files.

Shrinking SVGs with the SVG Optimizer

Design tools export SVGs full of comments, editor attributes and coordinates with six decimal places. The SVG Optimizer offers three presets:

  • Safe – removes comments, editor data, scripts and event handlers but leaves numbers alone.
  • Balanced – also rounds coordinates to 2 decimals, shortens colours and drops title/metadata.
  • Aggressive – rounds to 1 decimal for the smallest icons.

Use the visual comparison slider to check the result before downloading. If curves look wobbly, increase precision. Drop several files at once to optimize them together and download a ZIP.

Security note

Removing scripts, on* event handlers, foreignObject and javascript: links makes user-uploaded SVGs much safer to display. Keep the title element if the icon needs an accessible name.

Tools from this article

← All articles