FreeSVG community discussion forum

JayNick

Member

Registered: 2019-10-22

Posts: 7

API - JSON

I uploaded this animated SVG: https://freesvg.org/twin-witches to Openclipart - you will see my name in the SVG source code.

I used the API to access the JSON for url: https://freesvg.org/api/v1/svg/66535 and it returned
{"data":{"id":66535,"thumb":"TwinWitchesHalloween.png","svg":"TwinWitchesHalloween.svg","publish_datetime":"23\/10\/2017 07:00 AM","status":"Published","created_at":"2017-10-23","created_by":"Archive"}}

How do I access the TwinWitchesHalloween.svg file?

Not documented, but I see the .png file in an img subdirectory, i.e. https://freesvg.org/img/TwinWitchesHalloween.png  Where is the .svg file?  I get a server error when trying the img subdirectory. Am I missing something?

BTW, Can I claim and tag my openclipart images or should I upload and tag my images that were on openclipart, then tell you to delete a duplicate?  How would you like to handle this situation?

vedran

Moderator

Registered: 2019-09-21

Posts: 77

Re: API - JSON

Hi,
you can access svg on https://freesvg.org/storage/zip/blog/Tw … loween.svg

Please do not enter duplicates.
Register with same name which you had on openclipart and if information is in metadata of svg we will assign it to that username.
If not, we are working on claim button where you can as register user can claim images.

If you have IDs from openclipart which are yours, please send us and I can now manually assign it to you

JayNick

Member

Registered: 2019-10-22

Posts: 7

Re: API - JSON

Thanks vedran,

Is the /storage/zip/blog subdirectory a permanent location for all the .svg files? Personally, I liked Openclipart site where clicking on the image linked to the .svg file - instead of having a download button.

I wish I had my openclipart ids, but do not. I am registered with the same name as I had on Openclipart.

Thanks for your work on this project! I have modified my web page to link to FreeSVG.org instead of Openclipart.org

rob_s

Moderator

Registered: 2019-10-04

Posts: 184

Re: API - JSON

Jaynick, just a thought, not sure if this is of interest to you but would you be interested in putting together a guide for demonstrating how people would go about creating SVG animations and what tools are needed, I mention this was possible using synfig in a brief post but it could really do with being extended upon by somebody that knows what they are talking about, such as yourself, no pressure entirely up to you, and would completely understand if you can't as I am sure it would take some time to put together. But I think people would find it more useful than my post which lacks instructions https://forum.freesvg.org/viewtopic.php?id=13 you take full credit and guide remains CC0 belonging to no one.

I think the download button is great for 99% of people, as it's convenient, me personally I hated having to right click and save as to download in openclipart, but that is just my preference. As a future feature request purhaps the Webdevs could put in one of those copy boxes"the kind you see on script snippet sharing sites", where you can copy the direct link to the content by clicking a button, or purhaps just a copy link to clipboard button.

JayNick

Member

Registered: 2019-10-22

Posts: 7

Re: API - JSON

Animating SVG Images

I have created animated SVG images, but am far from an expert. There are 3 ways to animate an SVG image that I am aware of: Javascript, SMIL, and CSS. Javascript animation might be best used with the <canvas> element. A combination that works well for gaming.  Javascript, however, is disabled when using an HTML <img> or SVG <image> reference. Here are a couple of animation sequences demonstrating how to code a Bezier curve using javascript for animation: https://steamcoded.org/images/curve1.svg and https://steamcoded.org/images/curve2.svg These images will animate when used in an <iframe> as shown on this page: https://steamcoded.org/engr.html

Aside from animation, many SVG images I created linked dynamic data into the image and updated the image as the data changed. To do that, I found it easier to hand code the SVG images. Drawing programs provide quite a bit of bloat making it more difficult to find a specific object. To get a good understanding of animation, I recommend hand coding a simple SVG image and reading the W3C specifications. No clue how to hand code an SVG image? Try my SVG lessons page, which I created to show students (grades 4-12) how to hand code SVG images: https://steamcoded.org/lessons/index.html

Parts of the SMIL specification were incorporated into the SVG specification as seen in the SVG1.1 specification - animation section https://www.w3.org/TR/SVG11/animate.html There are examples in the specification. In addition there are SMIL animation examples on the online tutorial site w3schools - look under the SVG Misc heading: https://www.w3schools.com/graphics/svg_examples.asp

When Microsoft finally added SVG support in IE9, they stated they would not add support for SMIL and recommended CSS animation instead. Soon after, Google announced with would be removing SMIL support in Chrome, but relented at the community outrage and kept it in. There are some things that SMIL can do that CSS can not.

The CSS animation specification https://www.w3.org/TR/css-animations-1 provides a definition and w3schools has examples https://www.w3schools.com/css/css3_animations.asp In addition there are examples on all the animatable properties  https://www.w3schools.com/cssref/css_animatable.asp

While I have been able to duplicate many SMIL animated SVG images with CSS, I have searched for a solution to restart a CSS animation sequence without finding a way other than using javascript. I have found, however, that by using SMIL, I can restart a CSS animation sequence. I use the technique in these images https://steamcoded.org/images/MazeAnimation.svg and https://steamcoded.org/images/AnimatedTriangles.svg  The advantage of restarting the sequence with SMIL versus javascript is that it works with an <img> tag which blocks javascript.

Since my images are mostly hand coded, the source code is fairly easy to understand. I recommend viewing the source code to see how I coded it.

Not much of a guide. I welcome additional guidance.

rob_s

Moderator

Registered: 2019-10-04

Posts: 184

Re: API - JSON

Hi Jaynick, I reposted at https://forum.freesvg.org/viewtopic.php?pid=130#p130
apologies you weren't to know this, I should have pointed it out. I think it will get more exposure there, I had no idea CSS could be used for animations, I dabbled myself in the past but that was back in the days when macromedia flash was a good thing, It's all html5 or even 6, so I guess it makes sense CSS would supporting this.

I know it will have taken you a lot of time to prepare this so much appreciated! Regards, Rob.

Sorry webdevs Boris / Vedran, my mistake.