CODEWITHSUNDEEP
svghtml5-canvasfabricjsadobe-illustrator
Ajib
Ajib

Reputation: 41

Setting svg background not working in Adobe Illustrator, using fabric js

I have set an svg file as the background of a canvas, using a data uri. I am using fabric js for this. It is working correctly in every browser, when I export it as an svg file. But opening the svg file in Adobe Illustrator is not showing the background. Is there a workaround for that?

Below is the code generated using fabris.js' toSVG functionality.

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="400" xml:space="preserve">
    <desc>Created with Fabric.js 1.4.5</desc>
    <defs></defs>
    <g transform="translate(300 200)">
      <image xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgODAwIDYwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgODAwIDYwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9ImJhY2tncm91bmQ6IHdoaXRlIiB3aWR0aD0iODAwcHgiIGhlaWdodD0iNjAwcHgiPg0KPHJlY3QgeD0iLTc2IiB5PSItMzIiIGZpbGw9IiNBRUQyNUIiIHdpZHRoPSI5NDQiIGhlaWdodD0iNjk2Ii8+DQo8Zz4NCgk8cGF0aCBkPSJNNzU4LDQxdjUxM0g0M1Y0MUg3NTggTTc3MiwyN0gyOXY1NDFoNzQzVjI3TDc3MiwyN3oiLz4NCjwvZz4NCjwvc3ZnPg0K" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); opacity: 1;" transform="translate(-300 -200)" width="600" height="400" preserveAspectRatio="none">
</image>
</g>
   <g transform="translate(352.6 226.6) scale(0.1 0.1)">
     <path d="M 251 30.5725 C 239.505 33.871 233.143 56.2086 228.247 66 L 192.247 139 C 187.613 148.267 183.524 162.173 176.363 169.682 C 170.726 175.592 151.9 174.914 144 176 L 57 188.729 C 46.5089 190.241 22.8477 189.409 18.0093 201.015 C 12.21 214.927 32.8242 228.824 41 237 L 95 289.83 C 104.569 298.489 120.214 309.405 126.11 321 C 130.001 328.651 123.466 345.797 122.081 354 L 107 442 C 105.042 452.114 99.142 469.478 105.228 478.895 C 109.142 484.95 116.903 484.628 123 482.64 C 137.319 477.973 151.822 468.444 165 461.139 L 232 425.756 C 238.285 422.561 249.81 413.279 257 415.071 C 268.469 417.93 280.613 427.074 291 432.691 L 359 468.258 C 369.618 473.739 386.314 487.437 398.985 483.347 C 413.495 478.664 405.025 453.214 403.25 443 L 388.75 358 C 387.045 348.184 380.847 332.006 383.194 322.285 C 385.381 313.225 403.044 300.467 410 294.424 L 469 237 C 477.267 228.733 493.411 218.004 492.941 205 C 492.398 189.944 465.753 190.478 455 189 L 369 176.421 C 359.569 175.025 343.388 175.914 335.213 170.976 C 328.335 166.822 323.703 151.166 320.576 144 L 289.753 82 L 268.532 39 C 264.58 32.6459 258.751 28.3485 251 30.5725 z" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #FF0000; opacity: 1;" transform="translate(-256 -256)" stroke-linecap="round" />
 </g>
</svg>

I am attaching how the svg is rendered in web browser and Adobe Illustrator, respectively. (The star icon in the image is a foreground image I created.)

Actual output from browser:

http://oi57.tinypic.com/13zs7q0.jpg

Adobe Illustrator:

http://oi59.tinypic.com/2lcp5as.jpg

Did anyone come across this type of issue?

In addition to that, when I am using an image file instead of svg as background, it shows correctly in Adobe Illustrator, too.

Upvotes: 1

Views: 967

Answers (1)

Evan
Evan

Reputation: 2440

You might try to set up your canvas so that the exported SVG file includes the background as SVG elements, instead of as an embedded image. Illustrator doesn't seem to support embedding one SVG within another, as you've done.

The fabric.loadSVGFromURL or fabric.loadSVGFromString methods should parse your SVG into objects that you can add to your canvas. There's brief documentation in the Fabric Intro.

You'll want your resulting SVG to look something like this; the important changes are on lines 7 - 13

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="400" xml:space="preserve">
  <desc>Created with Fabric.js 1.4.5</desc>
  <defs></defs>

  <!-- This <g> element puts the background image inline, instead of using a data URI -->
  <g>
    <rect fill="#AED25B" width="600" height="400"/>
    <g>
      <path d="M530.085,41.954v294.827H75.636V41.954H530.085 M538.983,33.908H66.737v310.919h472.246V33.908L538.983,33.908z"/>
    </g>
  </g>

  <g transform="translate(352.6 226.6) scale(0.1 0.1)">
    <path d="M 251 30.5725 C 239.505 33.871 233.143 56.2086 228.247 66 L 192.247 139 C 187.613 148.267 183.524 162.173 176.363 169.682 C 170.726 175.592 151.9 174.914 144 176 L 57 188.729 C 46.5089 190.241 22.8477 189.409 18.0093 201.015 C 12.21 214.927 32.8242 228.824 41 237 L 95 289.83 C 104.569 298.489 120.214 309.405 126.11 321 C 130.001 328.651 123.466 345.797 122.081 354 L 107 442 C 105.042 452.114 99.142 469.478 105.228 478.895 C 109.142 484.95 116.903 484.628 123 482.64 C 137.319 477.973 151.822 468.444 165 461.139 L 232 425.756 C 238.285 422.561 249.81 413.279 257 415.071 C 268.469 417.93 280.613 427.074 291 432.691 L 359 468.258 C 369.618 473.739 386.314 487.437 398.985 483.347 C 413.495 478.664 405.025 453.214 403.25 443 L 388.75 358 C 387.045 348.184 380.847 332.006 383.194 322.285 C 385.381 313.225 403.044 300.467 410 294.424 L 469 237 C 477.267 228.733 493.411 218.004 492.941 205 C 492.398 189.944 465.753 190.478 455 189 L 369 176.421 C 359.569 175.025 343.388 175.914 335.213 170.976 C 328.335 166.822 323.703 151.166 320.576 144 L 289.753 82 L 268.532 39 C 264.58 32.6459 258.751 28.3485 251 30.5725 z" style="stroke: none; stroke-width: 1; stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #FF0000; opacity: 1;" transform="translate(-256 -256)" stroke-linecap="round" />
  </g>
</svg>

Upvotes: 1

Related Questions