How to Crop & Convert ICO to SVG: Step-by-Step Tutorial

By Bill Crawford  ·  March 2026  ·  5 min read  ·  Last updated March 14, 2026

Connect on LinkedIn →

Overview

This tutorial walks through every step of cropping an ICO image and converting it to an SVG file using the Data Conversion Center ICO to SVG Crop Converter. The output is a valid SVG document containing the cropped pixels as a base64-encoded PNG inside an <image> element — fully scalable, CSS-styleable, and compatible with every modern browser and vector editor. Everything runs inside your browser with no software installation and no server upload.

Best suited for: web component libraries, design system documentation, HTML templates where CSS scaling is needed, and Inkscape or Illustrator workflows where an SVG container is required. The output is a raster-embedded SVG, not a traced vector — pixel content is preserved exactly at native resolution.

Step 1: Open the Tool

Navigate to dataconversioncenter.com/image-tools/ico-to-svg-crop/ in any modern browser. The tool works in Chrome, Firefox, Edge, and Safari on both desktop and mobile. No sign-in, no extension, and no download required.

Step 2: Load Your ICO

You have two options for loading your source image:

• Drag and drop. Drag an ICO file (with a .ico extension) from your file manager directly onto the drop zone. The file loads the moment you release it.
• Browse. Click anywhere on the drop zone (or the "Browse Files" link) to open your operating system's file picker. Select your ICO and click Open.

As soon as the image loads, it appears in the source panel with blue crop handles at the corners and edges, initially set to the full image boundary. The browser decodes the ICO via its native image decoder, rendering the highest-resolution size available in the file.

Step 3: Adjust the Crop Area

The crop overlay has eight handles: four at the corners and four at the midpoints of each edge. Here is how each type behaves:

• Corner handles (NW, NE, SW, SE). Drag to resize the crop in both dimensions simultaneously — the most common handle for free-form cropping.
• Edge handles (N, S, W, E). Drag to move only that edge, constraining resize to a single axis. Use these to trim one side without affecting the opposite edge.
• Interior pan. Click and drag inside the crop rectangle (not on a handle) to reposition the entire selection without changing its dimensions.

As you drag, the crop dimensions badge in the panel header updates in real time to show the output pixel dimensions at full ICO resolution. The info bar below shows the exact pixel coordinates of the selection corners.

SVG tip: The SVG viewBox is set to the exact pixel dimensions of the crop. Crop tightly to the icon content you need — this produces an SVG with the correct intrinsic aspect ratio for your subject, requiring no additional CSS adjustment when you embed it.

Step 4: Preview the Crop

Before downloading, click Preview Crop. A pop-up opens showing the cropped region at browser width, with the exact output dimensions in the title. Use this to verify that the icon content is correctly framed — confirm nothing important is clipped at the edges and the framing covers exactly the region you need.

The preview renders as JPEG for speed. The actual SVG output embeds a lossless PNG and will be pixel-perfect. Close the preview and adjust handles if refinement is needed.

Step 5: Convert & Download the SVG

When you are satisfied with the crop, click Convert & Download SVG. The button briefly shows "⏳ Converting…" while the tool:

1. Draws the selected pixel region onto an off-screen canvas at full ICO resolution.
2. Calls canvas.toDataURL('image/png') to encode the cropped pixels as a base64 PNG string.
3. Constructs an SVG document string: <?xml version="1.0"?> declaration, root <svg> element with xmlns, xmlns:xlink, width, height, and viewBox attributes, and an <image> element with both href and xlink:href pointing to the base64 PNG data URL.
4. Serializes the SVG string as a UTF-8 Blob and triggers a browser download.

The file downloads as [original-filename]_crop.svg. For a source file named app-icon.ico, the output is app-icon_crop.svg. No server round-trip occurs.

Step 6: Start Over (Optional)

To crop and convert a different ICO, click ↺ Start Over. This clears the current image, resets the crop handles, and returns the tool to its initial drop zone state.

Tips for Best Results

• The output is raster-embedded, not vector-traced. The SVG contains the pixel data as a PNG image inside an SVG wrapper. It scales cleanly via CSS or SVG attributes, but the underlying pixels are fixed-resolution. Do not expect infinite sharpness beyond the original ICO dimensions.
• Full transparency is preserved. The embedded PNG uses lossless encoding with full alpha support. Transparent areas in the ICO are preserved exactly — no white fill, no compositing.
• Set display dimensions via CSS, not the SVG attributes. The SVG width and height attributes define the intrinsic size. Override these in CSS (width: 100%, or a fixed size) to display the icon at any size you need in your layout.
• Both href and xlink:href are included. The output SVG sets both attributes on the <image> element for maximum compatibility with SVG 1.1 renderers (which require xlink:href) and modern SVG 2 browsers (which use href only).
• Open in Inkscape or Illustrator for further editing. Both applications open raster-embedded SVGs and allow you to add vector paths, text, or frames on top of the embedded icon content — useful for annotation, branding overlays, or diagram creation.