Original file
After autocrop
Work in progress. Please wait ...
This autocrop website code is open source and provides a friendly front end to svg-autocrop.
What is SVG Autocrop?
- Autocrops to remove excess space around a logo while adding a one pixel border. It does this by temporarily converting to a bitmap and scanning to find the bounding rectangle of non-transparent pixels
- Adds a viewbox so that the SVG will not be distorted if placed in a rectangle with a different ratio
- Uses aggressive settings of svgo to remove a large amount of useless or redundant information and runs 5 times to eliminate pointless nested groups
- Standardizes the SVG header to the minimum necessary to reliably render
- Fails with an error if the SVG includes a raster image (such as a PNG or JPEG), as these do not scale seamlessly and needlessly add to the file size
- Fails with an error on SVGs that contain a text or tspan element since the text will not render reliably if the specified fonts are not installed (instead, you can convert the text to an image so that it will reliably render anywhere)
- Optionally adds a title since that is displayed as the title in the browser tab
Example API Usage - NodeJS
const baseUrl = 'https://autocrop.cncf.io/autocrop';
const rp = require('request-promise');
const input = require('fs').readFileSync(`node_modules/svg-autocrop/fixtures/f5.input.svg`, 'utf-8');
const response = await rp({
method: 'POST',
body: {"svg": input, title: "new title"},
uri: baseUrl,
json: true
});
console.info(response);
Example output:
{ success : true, result: '(svg output goes here)', stats: { originalSize: 1000, transformedSize: 500 }}
Example API Usage - curl (failure)
curl -X POST -H "Content-Type: application/json" -d '{"svg": "example svg", title: "new"}' https://autocrop.cncf.io/autocrop
Example output:
{"success":false,"error":"svg autocrop failed: Error in parsing SVG: Non-whitespace before first tag.\nLine: 0\nColumn: 1\nChar: ."}
Example API Usage - curl (success)
curl -X POST -H "Content-Type: application/json" -d "{\"svg\": `php -r 'echo json_encode(file_get_contents("node_modules/svg-autocrop/fixtures/alauda.input.svg"));'`, \"title\": \"Alauda logo\"}" https://autocrop.cncf.io/autocrop
Example output:
{"success":true,"result":"<svg xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" viewBox=\"245.96 47.46 574.08 199.08\"><title>Alauda logo</title><defs><clip ...
Example API Usage - curl (failure - embedded text)
curl -X POST -H "Content-Type: application/json" -d "{\"svg\": `php -r 'echo json_encode(file_get_contents("node_modules/svg-autocrop/fixtures/bad1.input.svg"));'`, \"title\": \"image logo\"}" https://autocrop.cncf.io/autocrop
Example output:
{"success":false,"error":"svg autocrop failed: SVG file has a <text> element. Please convert it to the glyph first, because we can not render it the same way on all computers, especially on our render server"}
Example API Usage - curl (failure - svg contains an image)
curl -X POST -H "Content-Type: application/json" -d "{\"svg\": `php -r 'echo json_encode(file_get_contents("node_modules/svg-autocrop/fixtures/badImage.input.svg"));'`, \"title\": \"image logo\"}" https://autocrop.cncf.io/autocrop
Example output:
{"success":false,"error":"svg autocrop failed: SVG file contains an image. Please use a pure svg file"}
Example API Usage - curl (failure - svg size is too large)
curl -X POST -H "Content-Type: application/json" -d "{\"url\": \"https://upload.wikimedia.org/wikipedia/commons/6/63/A_large_blank_world_map_with_oceans_marked_in_blue.svg\", \"title\": \"image logo\"}" https://autocrop.cncf.io/autocrop
Example output:
{"success":false,"error":"Maximum file size is 1.5MB"}
Example API Usage - curl (failure - service timeout)
curl -X POST -H "Content-Type: application/json" -d "{\"url\": \"https://upload.wikimedia.org/wikipedia/commons/6/63/A_large_blank_world_map_with_oceans_marked_in_blue.svg\", \"title\": \"image logo\"}" https://autocrop.cncf.io/autocrop
Example output:
{"success":false,"error":"Failed to autocrop within 20 seconds"}