SVG animation is too large: 3.5mb - animation

I made an svg animation using inkscape and Shapeshifter.design. Each number here is its own path. It looks good but the resulting output is 3.5mb!! I've tried svg reduction websites but no luck. Is there a way to implement this that isn't so big? Raw svg is too big to upload here so i am adding a link to a file

Related

How can ı convert a jpg file to a svg code?

Converting a jpg file to a svg code.
Hi guys, my friend sent me a jpeg file and I want to add this file to Figma but when ı try to change the structure of file in Figma, ı could not alter the colors and other things. If ı get an svg code and paste it to figma, ı may solve the problems. Thank you!
Short answer: you can't. JPEG is a raster image type (saves info about pixels) and SVG is vector (saves lines and fills mathematically according to degrees, thickness, etc)

Can I convert from swf (or fla or svg or snap or sprite.js) to bodymovin

I have a bunch of animated vector graphic files that I would like to convert to bodymovin (I assume I would need to convert them into after effects first and use the bodymovin extension).
I animated files in swf, fla, svg (using the animate element inside the svg), snap and sprite.js html5 formats. I need to preserve the animations (recreating them is not an option)
Is this possible? Any ideas?
I have imported one of my animated swfs directly into after effects and exported to an mp4 but it won't export to bodymovin (I think swf and the vector graphics are very different)
I had the same problem. You should get Bodymovin plugin for Adobe Animate CC. Have a look here: https://github.com/airbnb/lottie-web/issues/1604

SVG Images Getting disappeared

I've noticed this strange "bug" on my website. Sometimes some svgs aren't loaded correctly. Some images are loaded just fine, some svgs get loaded but not fully. (some parts aren't shown)
Here are examples:
Loaded fully, working fine - https://i.imgur.com/IsZcqwl.png
After closing page and opening it up for few times - https://i.imgur.com/3ManRbR.png
Actual SVG image - https://www.dropbox.com/s/i1ln1a0diko0a12/parrothandshake.svg?dl=0
You svg image: is a base64 converted png.
You can see it in the tag attribute here: xlink:href="data:img/png;base64,iVB[...]
I would not recommend using base64 at all. Even more so in a image tag inside an svg image. (This is debatable and opinion based)
I would recomend using Inkscape to convert png images to svg. There is a build in function for converting in the editor. Its also free and a handy tool to have when working with svg images.

Inkscape - Not fully converting png into svg

I opened one PNG file in Inkscape and exported it as SVG. When I opened that file with notepad I came to know that the PNG file is embedded within it. If the conversion happened then the resulting file should have only SVG related tags. It shouldn't embed the image within it. Or Am I doing anything wrong.
Note: Save as option also producing the same kind of file. I am using Inkscape version 0.48 in Windows 7 - 64 bit.
This is a bit of an old thread, but it comes up early in Google so I thought I'd contribute something.
In Inkscape, you must do a trace to change the image into SVG. Look at the Path | Trace bitmap menu item and play with the options on that screen.
After creating the trace, you can remove your source image and have a pure svg in your saved file.
I've found it helpful to create layers in Inkscape and move the source image to one layer and put the trace on another layer to let me make quick comparisons using the 'hide layer' buttons.
BTW, your source image can be anything - bmp, jpg, png, etc.
A .png file is a raster image file. In order to convert it to a vector graphic based format like .svg and have it be "native" svg rather than an included image you are going to either have to use a program that can rasterize it or in Inkscape trace the bitmap and turn it into paths. Inkscape provides information on tracing: http://inkscape.org/doc/tracing/tutorial-tracing.html

Using Zwoptex - Getting a Plist

I want to create a plist from a SpriteSheet using Zwoptex, I've got the spriteSheet(1 Png file with all the sprites I need) and I would like the Plist to be showed as If there were many frames. (I dragged a sprite sheet with 3x4 sprites in it) but I don't have the individual sprites to drag them, do you by any chance know any program that will cut the spritesheet for me to drag them into Zwoptex or is there a way that Zwoptex can Identify each sprite in the sheet? And get the frames like this
Frames
HumanUp1
...etc
HumanUp2
...etc
HumanUp3..etc etc
...etc
MetaData
instead of
Frames
HumanWalkSpriteSheet
* ...etc
MetaData
etc...
Thanks for your time!!
AlfredSpriteUnlocker can help you extract images from your spritesheet.
Here is tool: SpriteSheet-Unpacker
This works for png sheet. For pvr, just open source and change .png to .pvr
https://github.com/gongpengjun/SpriteSheet-Unpacker
You need to extract the sprites from png then import those sprites to Zwoptex.
I can recommend this software for your problem, but first I would suggest to check video of this software and then go for it.
Softwares: https://store.bluegamerzstudio.com/downloads/spooky-spritesheet-extractor-and-merger/

Resources