This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

SVG animation
#1
Photo 
Hi,

How to prepare animation .svg file in the visualization on the Logic Machine?

Thanks,
Sławek Budzyński
Reply
#2
What kind of animation do you want to add?

Please see the attached SVG file as an example. Keep in mind that it will not work as an object icon only as a separate image.

Attached Files
.svg   clock.svg (Size: 1.85 KB / Downloads: 283)
Reply
#3
(23.07.2015, 13:33)admin Wrote: What kind of animation do you want to add?

Please see the attached SVG file as an example. Keep in mind that it will not work as an object icon only as a separate image.

Thank you for your answerWink

I'd like to know how to add:
1) some motion icon e.g. spinning fan 1-stage or 3-stage fan,
2) some motion icon in menu.

In what application do you prepare clock.svg graphics?

I checked clock.svg on the visualisation demo and clock is working when I import it by "Image" object and clock is not working when I import it by "Link" or "Object".
Reply
#4
Quote:I checked clock.svg on the visualisation demo and clock is working when I import it by "Image" object and clock is not working when I import it by "Link" or "Object".
Yes, because SVG uses scripting and it's only available as a separate image but not as an icon.

SVG can be created in Inkscape, Illustrator or any other vector editor that can export SVG. Animation might require adding some JavaScript manually.

In your case maybe an animated GIF is the easiest solution?
Reply
#5
(24.07.2015, 09:37)admin Wrote:
Quote:I checked clock.svg on the visualisation demo and clock is working when I import it by "Image" object and clock is not working when I import it by "Link" or "Object".
Yes, because SVG uses scripting and it's only available as a separate image but not as an icon.

SVG can be created in Inkscape, Illustrator or any other vector editor that can export SVG. Animation might require adding some JavaScript manually.

In your case maybe an animated GIF is the easiest solution?

Yes, but isn't scalableSad
In what application do you embedding js code?
Reply
#6
You could try may be to put a transparent svg icon linked to the group address on top of the animated svg ?
Reply
#7
Working example attached Smile

Attached Files
.svg   fan.svg (Size: 1.58 KB / Downloads: 306)
Reply
#8
(29.07.2015, 06:30)admin Wrote: Working example attached Smile

There is some option. Thank you Big Grin

By the way, I learned a little about the structure of .svg files and editing it in NotepadSmile

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 56 56" enable-background="new 0 0 56 56" xmlConfusedpace="preserve">
<circle fill="#6BB2DC" cx="28" cy="28" r="28"/>
<g>
<path fill="#FFFFFF" d="M31.853,27.044c1.209-0.434,3.227-0.71,5.165,0.366c3.293,1.829,6.39-0.953,5.938-4.036
c-0.399-2.73-2.086-5.511-4.228-6.628c-3.203-1.67-5.629-0.74-7.506,1.297c-1.229,1.335-2.515,3.689-2.614,5.929
c-0.048,1.054-1.271,0.998-1.565,0.177c-0.435-1.209-0.71-3.227,0.365-5.164c1.83-3.294-0.953-6.391-4.034-5.94
c-2.731,0.401-5.512,2.087-6.629,4.229c-1.67,3.203-0.74,5.628,1.297,7.505c1.335,1.229,3.69,2.516,5.929,2.615
c1.055,0.047,0.999,1.271,0.178,1.565c-1.21,0.435-3.229,0.71-5.165-0.366c-3.295-1.83-6.391,0.954-5.939,4.035
c0.399,2.731,2.086,5.511,4.229,6.629c3.203,1.669,5.629,0.74,7.505-1.297c1.229-1.335,2.516-3.69,2.614-5.929
c0.047-1.055,1.271-0.999,1.565-0.18c0.435,1.211,0.711,3.229-0.366,5.167c-1.829,3.293,0.954,6.39,4.036,5.938
c2.73-0.398,5.511-2.084,6.628-4.228c1.671-3.204,0.74-5.627-1.297-7.506c-1.334-1.228-3.69-2.515-5.928-2.613
C30.976,28.563,31.031,27.338,31.853,27.044z M28,29.522c-0.84,0-1.521-0.681-1.521-1.521c0-0.84,0.682-1.521,1.521-1.521
c0.841,0,1.521,0.682,1.521,1.521C29.521,28.842,28.841,29.522,28,29.522z">
   <animateTransform attributeName="transform" type="rotate" from="0 28 28" to="360 28 28" dur="5s" repeatDur="indefinite"/>
</path>
</g>
</svg>


-SOME INFO ABOUT STRUCTURE-
<g> grouping objects
<path fill=....> this is the fan on out image
<animateTransform attri....> this is the code which animating our fan (more info -> https://developer.mozilla.org/en-US/docs...eTransform). This code is between <path fill=....> and </path>
Reply
#9
cool, I modify the clock to have a counter animation

It's ok but I need to put the GA in the SVG script.

Is there a way to use for example the class specify in the design ?
Should be great to put in the class field the GA and to take it in the script.

J'ai essayé de voire ce que donnait
this.parentNode.parentNode.className

mais ca marche pas.
Je fouille un peu le javascript.

Attached Files
.svg   jauge0-1-0.svg (Size: 7.4 KB / Downloads: 239)
-----------
FRANCE SMARTHOME & SMARTBUILDING INTEGRATION
SE ECO EXPERT
Reply
#10
(29.07.2015, 06:30)admin Wrote: Working example attached Smile

It is possible to include a bool obj into this fan image attached in above post, so when obj '1/1/1' is true it rotates? otherwise it stops?
Reply
#11
You can simply use two icons - one with animation and another without.
Reply
#12
(13.07.2021, 05:37)admin Wrote: You can simply use two icons - one with animation and another without.

Why did i not think of that.... !!! Yes this is what i will do
Many Thanks
Reply
#13
Hello 
Great how Clock works 
Is there an Icon for date?
BR,
Best Regards,
Reply
#14
See this: https://shkspr.mobi/blog/2018/02/this-sv...days-date/
Reply


Forum Jump: