FreeSVG community discussion forum

Place to discuss various topics regarding public domain svg, community.

You are not logged in.

#1 Re: Website Issues and Support » [FEATURE] View animated SVG Image » 2020-01-31 17:20:05

It's not just animations, but scripted files as well, like my SVG Calculator https://freesvg.org/scripted-calculator . I am not asking that the .svg files be displayed on the main page, but on the detail page like this one: https://freesvg.org/triskelion-path-animation

If nothing else, I would like to see the .png image displayed on this page https://freesvg.org/triskelion-path-animation be linked so that when I click on the .png image displayed, I get the SVG image https://freesvg.org/storage/zip/blog/Tr … mation.svg 

That is how openclipart.org used to work. Now their download SVG button links directly to the .svg file on their site - that option is better than your site in my opinion.

Having the browser interaction when I click on the Download SVG button is unnecessary and painful. It then displays from my local computer instead of your website, which forbids my viewing the SVG source code on my iPhone, iPad - I like to see how some things are coded in SVG.

BTW, some animations are large, but mine, being handcoded, are typically small and maybe smaller than the .png file.

#2 Website Issues and Support » [FEATURE] View animated SVG Image » 2019-12-12 21:31:42

JayNick
Replies: 6

I would find it much more convenient to be able to view the SVG image without having to download it. SVG support for animation is lost when displaying the .png image. (After all, this site is FreeSVG not FreePNG - haha).

Perhaps you could display the SVG image instead of the .png image, or add a View SVG button, or link the SVG image to the displayed .png image. Openclipart used the last option, when clicking on the .png thumbnail, it displayed the SVG image by itself.

Thanks for all your hard work. It is great to have these images available again. You are even getting me to fix some of the older images I claimed that were broken due to browser updates.

#3 Re: Website Issues and Support » [BUG] sitewide restriction to prevent deletion of images by users » 2019-11-30 17:17:13

Actually, I have some images that might need to be deleted or reworked. I have some that worked with the OpenClipArt API that no longer work. Also, some of my earlier animations no longer work due to browser updates that should be updated/deleted.

Thanks to freesvg.org for keeping embedded script. That is something freesvgclipart.com stripped rendering several of my clipart useless. For example, I set the current time on many clocks with script - adding script to remix the great work of others.
Compare:
https://freesvgclipart.com/download/55344/
versus
https://freesvg.org/storage/zip/blog/An … lClock.svg

#4 Re: SVG clip art » FREE creative craft projects making use of SVG graphics » 2019-10-25 17:26:10

I have created a web page with SVG images that can be used with a Cricut machine. There are links to silhouette images from FreeSVG.org that work great without any modification.  https://steamcoded.org/cricut/index.html 

Just a few examples. I am sure FreeSVG.org has many more that will work.

#5 Re: Website Issues and Support » API - JSON » 2019-10-25 17:15:09

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.

#6 Re: Website Issues and Support » API - JSON » 2019-10-23 18:45:24

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

#7 Website Issues and Support » API - JSON » 2019-10-22 19:58:07

JayNick
Replies: 5

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?

Board footer

Powered by FluxBB