Svg convert to path

Vectors
1

Is there a way to import a svg and convert it to paths. When I turn it into a vector I just get a square.
or even a eps
So I can edit and morph
Is there a hack way to do it? as I know it might come in the future
thanks

2

Unfortunately there is not currently a way to edit vector formats unless it was first created as an element within Hype. Imported vector files are placed as images.

Hype's vector shape element only supports a single path with limited SVG commands, so even if you could hack the document format it is unlikely you could properly represent the file currently.

This is definitely the most requested feature since introducing Hype's own Vector Shapes :slight_smile:.

2 Likes
3

@jonathan can you tell us how the path data and bezier curve data are represented in the data.plist file?

I looked in the file's XML and found the references to vector shapes made in Hype. I would like to try writing a script to take my source path coordinates and output Hype-friendly path data equivalent.

4

keyshape may help as it offers svg-import ... https://www.keyshapeapp.com/

and on the other hand its output can be imported and controlled within hype.

2 Likes
5

This is entirely unsupported and anything you build upon it is likely to break in the future.

Looking at the objectValue for the BezierPath of an element looks something like:

<dict>
<key>identifier</key>
<string>BezierPath</string>
<key>objectValue</key>
<dict>
	<key>allowEndPointModification</key>
	<true/>
	<key>bezierCurves</key>
	<array>
		<dict>
			<key>endControlPoint</key>
			<string>{45, 184}</string>
			<key>endPoint</key>
			<string>{101, 114}</string>
			<key>endPointMovementMode</key>
			<integer>0</integer>
			<key>startControlPoint</key>
			<string>{1, 1}</string>
			<key>startPoint</key>
			<string>{1, 1}</string>
			<key>startPointMovementMode</key>
			<integer>0</integer>
		</dict>

Each path can have multiple curves. The anchor points/vertexes are startPoint and endPoint, and the curve is made via the startControlPoint and endControlPoint. Thus, each curve is a cubic bezier. The movementMode is the editor option for how to manipulate the startPoint curve (asymmetric, mirrored, disconnected, corner).

Hopefully the other values are self-evident. The one that might not be is "type" which is 0 for a motion path, and 1 for a vector shape. In this context, you should always use 1.

3 Likes
6

@jonathan I love how we ask for information any other development would say "hell no" to, but you lovingly let us have the information with advice like "if you do this, bad things will happen".

It's like a parent who let's their child stick a fork in an electric socket so they learn a lesson :rofl:

4 Likes
7

I do so hoping my kid will be an electrical engineer :wink:.

3 Likes