How can I put my #keyframes declaration inline in my HTML/SVG? - html

Question

Ok, so I have this HTML code for an I Love You animation. And I'm having some difficult time to adjust it as an inline code.
Is this possible in any way?
.heart {
fill: red;
position: relative;
top: 5px;
width: 50px;
animation: pulse 1s ease infinite;
}
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
I
<svg class="heart" viewBox="0 0 32 29.6">
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>
You

Answer 1

You can try like below with pure SVG and no external CSS (only inline)
I
<svg class="heart" viewBox="0 0 32 29.6" width="50" style="overflow:visible;position: relative;top: 5px;">
<g transform-origin="center">
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z" fill="red"/>
<animateTransform attributeName="transform"
type="scale"
keyTimes="0;0.5;1" values="1;1.3;1"
dur="1s" repeatCount="indefinite"/>
</g>
</svg>
You

Answer 2

You might include the style into svg element itself:
I
<svg class="heart" viewBox="0 0 32 29.6">
<style>
.heart {
fill: red;
position: relative;
top: 5px;
width: 50px;
animation: pulse 1s ease infinite
}
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
</style>
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>
You

Answer 3

You can place the keyframe and css inside the styles tag inside svg. Like here
<svg">
<style type="text/css">
.heart {
fill: red;
position: relative;
top: 5px;
width: 50px;
animation: pulse 1s ease infinite,
}
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
</style>
</svg>
https://codepen.io/shshaw/pen/WvYJQP.
But the inline can not be done.

Answer 4

You can use scoped style. It will only affect his direct parent and content.
I
<svg class="heart" viewBox="0 0 32 29.6">
<style scoped>
.heart {
fill: red;
position: relative;
top: 5px;
width: 50px;
animation: pulse 1s ease infinite;
}
#keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
</style>
<path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg>
You