CODEWITHSUNDEEP
javascriptsvgfabricjs
Charlie Heflin
Charlie Heflin

Reputation: 175

Trim blank space from SVG - Fabric JS

I'm trying to add an SVG letter to a fabricjs canvas. When i import it the width stays at 1000 when the letter isn't actually that width. It's important the width is the true width of the character otherwise the calculations for the space between letters is way off. Here's the svg data for the letter: 

    <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<path d="M586,504.5h0.2c-0.1-0.4-0.1-0.8-0.1-1.2c0-0.4,0.1-0.8,0.1-1.2H586c-0.8-12.2,3.9-24.2,16-37.3
    c33.3-36.4,40.3-79.6,40.3-129.2c0-91.4,0-167.9,0-254.1c0-23.8-6.2-35-30.8-41.4c-86.6-22.2-161.2-24.6-260.8,9.5
    c0,19.2,0,36.9,0,54.7c0,133,0.2,266,0.2,399c0,133-0.1,266-0.2,399c0,17.8,0,35.5,0,54.7c99.6,34.1,174.2,31.7,260.8,9.5
    c24.6-6.4,31.2-17.6,30.8-41.4c-1.4-84.7,0-169.4,0-254.1c0-50.4-7-92.8-40.3-129.2C589.9,528.6,585.1,516.7,586,504.5z M449.1,207
    v-45.7c0-22.1,17.9-40,40-40c4.7,0,9.5,0,14.3,0c22.2,0,40.1,18,40,40.2c-0.4,81.1-1.8,154.6-1.8,232.4c-1,19.5-22.6,44.5-41.4,55.2
    c-31,17.7-51.2,1.1-51.2-35.3C448.9,344.9,449.1,275.9,449.1,207z M489,885.2c-22.1,0-40-17.9-40-40v-45.7
    c0-68.9-0.2-137.9-0.1-206.8c0-36.4,20.2-53,51.2-35.3c18.8,10.7,40.4,35.7,41.4,55.2c0,77.8,1.4,151.3,1.8,232.4
    c0.1,22.2-17.8,40.2-40,40.2C498.5,885.2,493.7,885.2,489,885.2z"/>
</svg>

I've tried changing the 1000 in the viewBox and enable-background attributes but neither had an effect when imported to the canvas

Upvotes: 1

Views: 798

Answers (1)

Peter Collingridge
Peter Collingridge

Reputation: 10979

Try changing the viewBox to 350.7 23.6 291.7 959.3, which is the boundary of the shape (I used the getBBox() method to find it).

Alternatively you could try this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 291.7 960">
<path d="M236 481.5h0.2c-0.1 -0.4 -0.1 -0.8 -0.1 -1.2c0 -0.4 0.1 -0.8 0.1 -1.2H236c-0.8 -12.2 3.9 -24.2 16 -37.3c33.3 -36.4 40.3 -79.6 40.3 -129.2c0 -91.4 0 -167.9 0 -254.1c0 -23.8 -6.2 -35 -30.8 -41.4c-86.6 -22.2 -161.2 -24.6 -260.8 9.5c0 19.2 0 36.9 0 54.7c0 133 0.2 266 0.2 399c0 133 -0.1 266 -0.2 399c0 17.8 0 35.5 0 54.7c99.6 34.1 174.2 31.7 260.8 9.5c24.6 -6.4 31.2 -17.6 30.8 -41.4c-1.4 -84.7 0 -169.4 0 -254.1c0 -50.4 -7 -92.8 -40.3 -129.2C240 505.6 235.1 493.7 236 481.5zM99.1 184v-45.7c0 -22.1 17.9 -40 40 -40c4.7 0 9.5 0 14.3 0c22.2 0 40.1 18 40 40.2c-0.4 81.1 -1.8 154.6 -1.8 232.4c-1 19.5 -22.6 44.5 -41.4 55.2c-31 17.7 -51.2 1.1 -51.2 -35.3C98.9 321.9 99.1 252.9 99.1 184zM139 862.2c-22.1 0 -40 -17.9 -40 -40v-45.7c0 -68.9 -0.2 -137.9 -0.1 -206.8c0 -36.4 20.2 -53 51.2 -35.3c18.8 10.7 40.4 35.7 41.4 55.2c0 77.8 1.4 151.3 1.8 232.4c0.1 22.2 -17.8 40.2 -40 40.2C148.5 862.2 143.7 862.2 139 862.2z"/>

I've translated the shape by (-350, -23) using this so it should start at (0, 0).

Upvotes: 1

Related Questions