SVG Autocrop

See description and api usage below
Step 2: Optionally provide a and a label width in % (from 10 to 100)
Step 3: Drag and Drop file below or or

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?

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"}