3

I'm currently working on a project that is using the HTML5 Canvas API and I'm encountering a few problems, one of which is disappearing opacity masks used to add texture to an element in Adobe Illustrator.

To be clear, in Illustrator with the transparency menu open I do the following:

  • Copy image that I want to mask to clipboard

  • Select shape to use as mask

  • Click Make Mask

  • Click black square and paste image from clipboard

Now I select the artwork and export the selection from the file menu.

The resulting svg file can be opened with a browser and renders correctly including the opacity mask, however, if I try to paint this svg file on the canvas via JavaScript and the HTML5 Canvas API anything that is an opacity mask is missing from the rendered image.

Here is an example image from the browser rendered (file opened with) svg file: enter image description here

The door shape with wood effect is the opacity mask;

This is the svg file:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="203" height="257" viewBox="0 0 203 257"><defs><filter id="luminosity-invert" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feColorMatrix values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/></filter><mask id="mask" x="15" y="17" width="180" height="260" maskUnits="userSpaceOnUse"><g style="filter:url(#luminosity-invert)"><image width="1920" height="1280" transform="translate(15 17) scale(0.09 0.2)" xlink:href="../../../../Adobe/distressed%20textures/free-templates/9%20Wood%20Textures/Texture1.jpg"/></g></mask></defs><title>opacity-mask</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g style="mask:url(#mask)"><path d="M19.5,255.5V92.5s11-59,83-59,71,54,71,54v169Z" style="fill:#42210b;stroke:#000;stroke-miterlimit:10"/></g><rect x="0.5" y="0.5" width="202" height="16" style="fill:#42210b;stroke:#000;stroke-miterlimit:10"/></g></g></svg>

Now when I try to include this image programmatically on the HTML Canvas the opacity mask is missing and all I get is the solid brown bar (added to test) at the top.

I could paste some code to show this but, the problem is not in code but an underlying problem with rendering opacity masks, for example, if I import the svg file into vectr.com, I experience the same problem.

Does anyone have a clue how to resolve this, I'm flummoxed!

Thanks in advance if you can help.

Improve this question
4
  • I think your questions are more about HTML5 Canvas than Illustrator and you might get better insight at StackOverflow.com .. but I am kind of guessing regarding that. I do know Illustrator is Illustrator, you get what you get. There aren't any real "hidden" user-controllable options for exporting/saving in AI beyond what you see.
    – Scott
    Oct 29, 2021 at 20:24
  • I'm not sure that it is about the canvas as I explained that the same problem occurs when opening the file in other applications such as vectr at vectr.com and I think there must be some other way to apply textures to images no?
    – Fishbite
    Oct 29, 2021 at 20:33
  • 1
    Well opacity masks are a proprietary AI thing. It's not uncommon for other software to not support proprietary features. i.e. Nothing outside of AI supports Meshes either. You often need to "bake in" the unsupported feature (sometimes creating many more vector objects), but I don't know if that's feasible for your usage.
    – Scott
    Oct 29, 2021 at 20:48
  • 1
    I think this is in fact a coding question. That your SVG doesn't render properly on vectr.com isn't surprising as you link to a JPG file on your local disk which can't be accessed by a website. You should be able to get this working on a local apache server. I've been trying it out but it's giving me trouble. I am able to render this if I link to some nonexistent URL. A "missing link" image inside a mask. So it is supported somehow. I think the problem could be that the SVG is rendered on the canvas before the image has finished loading.
    – Wolff
    Oct 29, 2021 at 21:31

1 Answer 1

Reset to default
1

After taking a quick look at the SVG, a guess would be that it's because there's either a missing image file, or the link doesn't point to the location of the image file "Texture1.jpg" on the server.

Looks like it might even be a file located on your own computer rather than an image file on a server. Do you recognize this file path? ../Adobe/distressed%20textures/free-templates/9%20Wood%20Textures/Texture1.jpg - is this some template you downloaded to your computer perhaps?

If you Placed the image in Illustrator rather than copy pasting it, then it will be a linked file. Perhaps consider embedding it instead. Or alternatively make sure the image file is uploaded to the server, and that the link points to it there. You may have to manually edit the SVG in a text editor to make sure it points to the proper file location.

By the way, using an image as an opacity mask in Illustrator and exporting as an SVG certainly works. Here's an example I made, but here the image is embedded in the SVG, not as a separate image file.

Improve this answer
11
  • The OP wants to render the SVG on an HTML canvas. Here is a jsfiddle where I render your SVG on an HTML canvas. It works! So the problem must be with the image not loading for several reasons. As I mentioned in a comment I tried to do this locally with a linked image of my own without success, so I'm pretty sure the problem is how to load the image before rendering the SVG on the canvas.
    – Wolff
    Oct 30, 2021 at 11:31
  • @Wolff thanks for trying that and showing that an opacity mask does indeed work in that environment, Maybe just using an embedded image is the answer then? I suppose file size might be an issue, but I should imagine it would be possible to use a pretty small jpeg file.
    – Billy Kerr
    Oct 30, 2021 at 11:40
  • @Wolff - found this question on stack overflow - I wonder if this issue is related?
    – Billy Kerr
    Oct 30, 2021 at 13:55
  • 1
    This is all very useful stuff folks, it is much appreciated. Billy, yep that's a path to the file on my 'puter I'll have to check out the settings at export time. @wolff splendid job, thanks for proving that it can be done. This is why I posted on this forum rather than stackoverflow, folks here have a much better understanding of the apps designers use. I agree that the file definitely needs to be embedded in the svg, it wouldn't make sense any other way. I'm surprised that that is not the default in the export options. I'll go and test your theory and get back to you all here.
    – Fishbite
    Oct 30, 2021 at 19:20
  • 1
    @BillyKerr I actually thought I had copied and pasted the image the image into the document as I simply dragged and dropped the file from a folder into the ai document and Windows said "copy". However, when I looked at my layers I could see that indeed the files were linked and not embedded so perhaps dragging and dropping gives me the same result as choosing to Place and image. I don't have any options appear to disable the "link" option though even when I choose "File-->Place" Strange! But thank you to everyone for all the input you've given me.
    – Fishbite
    Oct 31, 2021 at 16:55

Not the answer you're looking for? Browse other questions tagged or ask your own question.