SVG masks or some alternative?

Hi Hype community.

Is there any way to use svg as a mask. Maybe hard code it to group somehow? I need to create a logo animation and I’ve been searching myself senseless. Basically the logo is shaped like a “misformed” ellipse and i would like to mask of anything overboard.

Thanks in advance.

It might not line up with the logo, but the easiest way to mask something in Hype is to use the “Content Overflow” “Hidden” option in an element. This can even be used with a “Group” to hide multiple elements.

To get custom shapes, the edges can be rounded.

Ah yes. Thanks for the reply. The content overflow hidden feature I use daily, with rectangles, circles and anything between. All though I have had some browser compatibility issues with radius induced circle masks. I think most shapes are manageable with this, only if we could somehow combine multiple shapes as content overflow hidden masks.

it’ll not be shown within hype only in browserpreview … svgClipping.hypetemplate.zip (12.5 KB)file

Thank you Hans! It’s a huge leap forward for me but unfortunately it only renders properly on Firefox.

Screenshot here: http://imgur.com/9lAAoCH (1) Chrome (2) Firefox (3) Safari

Edit: I think I was maybe a bit lost for words with my last post as well. I know that multiple objects inside a group will be okay but what about a group outline made out of several shapes to produce a new shape (for instance like two circles would produce a “stereo” icon mask).

normally I use SVG

LIVE PREVIEW

in the Project you can see an example with an SVG mask. The apple logo :slight_smile:

svg_mask_apple_logo.hype.zip (126.9 KB)

You have to create a file in Adobe Illustrator PC-Mac / CorelDraw PC (or other similar app).
Copy the code of the svg file in a text field (inner HTML).
Use the same background color for filling.

hope this helps
Michelangelo

4 Likes

That is perfect! Thank you so much!

Hi. The last technique works well but is there any way to do basically the same thing but run animation behind that mask? Right now the background is limited to the “masks” solid colour.

Hey,
This may help

Thank you. This is a very good solution as well. Unfortunately there is no love for Edge: http://caniuse.com/#feat=css-clip-path

I will try this and let you know.

1 Like

@Luckyde already seen, very interesting!
thanks

1 Like

Hmm well if you’re going for edge would making a version in canvas work? Or even raphaeljs which is svg but has ie support. But mind you is meant for basic things

Really great.

So, the trick is use HTML widget, and fill the same color to the SVG background?

Thanks.

Alex

I found that if the SVG mask image was exported from Sketch, it will support all browser automatically, I mean no need to fill background color for it manually.

Here is the Screenshot:

it is much convenient for people who are not familiar with code or photoshop

Alex

yes, if you use the same color it works

Hi

I'm maybe missing something but what's the difference between

  • copying a shape with a hole in Illustrator and pasting it Hype
  • and creating an HTML widget to paste the code in it?

The problem with the HTML widget is that it's difficult to scale it, rotate it, whilst the PastedVector behaves like a simple object making it easier to rotate, scale over time. And the final result is the same.

Or I'm maybe missing something.

1 Like

Pasting directly will create an Image element that points to the PastedVector.svg file, and be treated like any other image format.

Creating an HTML Widget and pasting the SVG contents produces an iframe (a HTML page that has its own URL, so this is very heavyweight), and then you are placing SVG data onto that. From a resizability perspective, there's usually nothing that ties the size of the iframe to the size of the SVG data - you would typically need to add width/height 100% styling to the code. But you can direct edit the code this way.

The other option is to create a Rectangle element, and then paste the SVG code like the HTML Widget. The Rectangle is just a <div> on the page, so it does not require making a file and then making a network request to that file to fill an iframe. Beyond this, it has the same limitations and advantages as the HTML Widget method.

I have a recollection that if the SVG has embedded SMIL animations, some browsers won't render them when treated as an image element. Pasting the code direct is a solution for this edge case.