Converting a Pasted Vector into a Hype Vector Produces this

Blurry Question mark in Scene and Layout Thumbnail?

PS. If your wondering is it a P from a playstation logo, why yes it is a P from a playstation 5 logo. Im trying to put my spin on it. Im trying to animate the logo by way of revealing the letters with vector points but struck with these weird anomalies.

Also, it produces this line to right of the p letter? That I cant get rid of?

1 Like

Document?

Max, nothings better than recreating yourself paste in a vector and convert it a vector.

Well if you put it like that. It is set as a background image in the SVG container. Check repeating properties and also the shape fitting is done by the runtime and uses the top left anchor as a origin. I am on a phone right now. But if I remember correctly there is no True vectorshape created …

1 Like

Quite odd.

No, actually not. It is just that people think that convert to vector shape is referencing the pasted vector data. But it is actually just for the rectangle that is created with the vector shape as a background image.

You can check it yourself. Create a regular rectangle and convert it to a vector shape. Everything as expected. Now think about it… you could also create a rectangle assign any PNG or SVG as a background image and then convert it to a vector shape.

That is actually what is happening only that assigning the background image happens while pasting the vector data.

Hype can’t embed native vector data out of the box and pasting it doesn’t change that fact.

So your saying it is expected that I get that black line when its converted? Also, How do you explain the blurry question mark on in the Scenes and Layouts?

Sigh, I wish hype allowed for pasting real vectors and allowed for vector point modifications vs it being a bg now.

No, that is a bug but as it is converted from a HTML background image to a SVG background fill. So, in that process something is going wrong. Maybe SVG doesn’t like a SVG (inception :wink: ) as a background fill. At least not in the ImageMagick renderer creating the thumbnails. My guess is that it all works with a regular image.

1 Like

Max, for some strange reason your previous response made it seem or the way it was translated in my mind “its OK, no need for panic its suppose to do” rather “well its a bug of sorts”?

Lost in translation. There are two issues. The display and the other one I was addressing is the false expectation that a true vector shape can be created from the pasted data. The later is okay and expectorant. The second issue… display error for SVG background in a SVG container seams to be a bug. Sorry for that confusion.

:grin: funny!

Posting a document with this would be best.

What version of macOS are you running? I think the “?” issue may be fixed on later versions.

The line on the side could be anything from an issue with the SVG itself to a simple webkit rendering bug that may or may not be based on other element settings.

1 Like

MacOs High Sierra

Every Browser has that line thats appearing this is only for SVG not for images.

Here Enjoythebug.hype.zip (25.4 KB) Alternatively, like I said to Max you can copy any vector shape from illustrator and paste it right into Hype, convert into Hype Vector Shape.

What Im trying to do is animate its vector points which would result in a hand drawn effect from a vector, an odd set of circumstances yes :slight_smile: Does anyone here have a better alternative?

Unless it doesn’t, and then it is us hunting down something when you could quickly provide an example that can be immediately examined. For example, a paste of an SVG from Sketch and on macOS 10.15 doesn’t reproduce this at all. It was not immediately clear from the post what the screenshots were about, but much more evident in the document. Please always provide reproduction documents and steps to reproduce when possible. We are trying to save time and provide accurate solutions when asking for a document - your time included so there is less back-and-forth on an issue.

In this case, the issue with the question mark appears to be resolved in macOS 10.15 for me (and I would also guess it is resolved on 10.14 from what I recall about it). But now that I see the document, it is probably because the scene thumbnail creator didn’t have correct access to the background image paste file.

As for the single line on the side, this is an artifact of the fact that Vector Shapes use SVG repeating patterns as a background image, and the SVG image for this pattern has non integral width/height/viewport size that isn’t a perfect fit in the integral pixel based element.

If you were to change the pasted SVG to use pixels, it would work:

from:

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="322.2px"
	 height="220.5px" viewBox="0 0 322.2 220.5" style="enable-background:new 0 0 322.2 220.5;" xml:space="preserve">

to:

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="322px"
	 height="220px" viewBox="0 0 322 220" style="enable-background:new 0 0 322 220;" xml:space="preserve">

I’ve filed a bug on our tracker to see if this can be improved.

1 Like

I see, my response to reproducing it yourself by way of copying was based on the assumption it would happen on all of the MacOs starting with Sierra to High and so on… However, after reading about the differences like from where its being copied and what versions of MacOs I’m using. That said, I have so much appreciation for what you have to put up with. (People like myself that don’t provide docs) :lying_face:

2 Likes

good old masks did the trick. good for a dribbble shot? As buggy as it is tagged as tumult hype, at least for me - some good exposure.

4 Likes

Looks great to me :slight_smile:.

1 Like

Really nice! How did you make it? I thought there was no masking tool in Hype.

You’re right, there’s no ‘masking’ tool. All you’ve to do is add the element to a group, set the group’s dimensions to match the area in which you want your element to be visible and set the group’s overflow property to hidden.

1 Like

I see. Thank you very much for the reply!