Simulate eye blink animation on SVG element with CSS only - html

I have the following section of an SVG file (it's basically a hyphen character drawn out).
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero"></path>
I want to animate a sort of eye blink on that part of the SVG file so that the shape ends up looking like this.
<path fill="#000000" d="m593.09674 394.5932l3.4421997 10.035461l-30.647644 10.530273l-3.4421387 -10.035431l30.647583 -10.530304z" fill-rule="nonzero"></path>
I can't figure out how to do this with CSS only. One "blink" is the first step. Of course, the next step is to time a few different blinks so that it looks natural. Here's the entire SVG shape -- I'd be "blinking" the left and right eyes at the same time. I wish I could provide more detail here, but I'm a novice.
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
<path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
<path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero"></path>
</g>
</svg>
After playing around a bit more I have this using SMIL
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
<path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
<path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero">
Now I don't know if this is possible, but I'd like to iterate each blink at somewhat random intervals. Or at the very least, something like this:
blink.........blink.blink..............blink......blink.
I don't know how to loop these animations, but I'm learning a lot here tonight. :)


Here's an answer using SMIL, I've just pasted the d values into the animate element's values attribute. I've used keyTimes so that there's a pause between winks.
<svg version="1.1" viewBox="0.0 0.0 960.0 720.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<clipPath id="p.0">
<path d="m0 0l960.0 0l0 720.0l-960.0 0l0 -720.0z" clip-rule="nonzero"></path>
</clipPath>
<g clip-path="url(#p.0)">
<path fill="#000000" fill-opacity="0.0" d="m0 0l960.0 0l0 720.0l-960.0 0z" fill-rule="evenodd"></path>
<path fill="#000000" fill-opacity="0.0" d="m649.69977 92.97008l50.425232 175.71654l-429.13388 123.08661l-50.4252 -175.71654z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m355.69608 198.657l13.931641 31.553772q-31.161438 10.368347 -39.784515 24.220184q-8.623077 13.851852 -3.291687 32.43013q3.934967 13.712189 13.081268 21.84961q9.150635 8.152466 21.012024 8.814056q11.876434 0.6572876 35.531982 -6.127716l189.61984 -54.387848l10.451599 36.420624l-187.54718 53.793365q-34.544586 9.908264 -55.914734 6.983734q-21.3508 -2.9138489 -36.50644 -18.17038q-15.15564 -15.256531 -22.159271 -39.66211q-10.399902 -36.240417 4.925995 -61.45897q15.325897 -25.218552 56.649475 -36.258453z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m709.23364 180.81792l70.299255 245.6378l-407.68506 116.66141l-70.299225 -245.63779z" fill-rule="evenodd"></path>
<path fill="#DE8664" d="m341.936 325.75626l275.27927 -78.772736l29.556519 103.275696q9.028137 31.546051 6.1314697 52.9989q-2.8966675 21.45288 -17.190369 37.212128q-14.274475 15.77002 -33.2323 21.194916q-17.650879 5.0509033 -35.986633 -0.07107544q-18.316406 -5.111267 -33.43347 -21.701935q-0.17059326 27.059845 -13.978088 45.540375q-13.807495 18.4805 -37.842804 25.358337q-19.34842 5.5366516 -38.301544 2.119049q-18.953125 -3.417633 -31.40564 -12.855988q-12.452545 -9.438324 -22.249084 -26.235077q-9.781494 -16.801056 -17.304962 -43.089417l-30.042358 -104.973175zm170.03479 -9.244995l17.037445 59.53189q6.930176 24.215332 13.139282 33.815063q8.107788 12.713135 19.693115 17.020172q11.600342 4.302765 26.051575 0.16744995q13.715149 -3.924652 22.242432 -13.483215q8.54657 -9.547852 8.897034 -22.861145q0.36975098 -13.302551 -8.121033 -42.970825l-15.747681 -55.0253l-83.19217 23.805908zm-127.11667 36.375183l19.616943 68.54501q5.051483 17.650757 8.400482 24.41217q5.8516846 11.928558 13.525513 18.866364q7.678131 6.9527893 19.28418 9.514954q11.610321 2.5771484 24.754639 -1.1841736q15.397614 -4.4060974 24.497253 -15.542389q9.099609 -11.1362915 9.693878 -26.437073q0.60928345 -15.305115 -6.914215 -41.593475l-18.219696 -63.662903l-94.63898 27.081512z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m535.59 377.16547l25.039368 68.031494l-130.39368 47.874023l-25.039368 -68.031494z" fill-rule="evenodd"></path>
<path class="left-eye" fill="#000000" d="m434.8382 428.43774l11.528778 -4.232788l12.963409 35.221375l-11.528778 4.232788l-12.963409 -35.221375z" fill-rule="nonzero"></path>
<path fill="#000000" fill-opacity="0.0" d="m653.23834 335.08148l25.039368 68.031494l-130.39368 47.874023l-25.039429 -68.031494z" fill-rule="evenodd"></path>
<path class="right-eye" fill="#000000" d="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" fill-rule="nonzero">
<animate attributeName="d" dur="3s" repeatCount="indefinite" values="m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z;m593.09674 394.5932l3.4421997 10.035461l-30.647644 10.530273l-3.4421387 -10.035431l30.647583 -10.530304z;m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z;m556.02527 384.85477l11.03009 -4.0496826l12.407532 33.71103l-11.03009 4.0496826l-12.407532 -33.71103z" keyTimes="0 ; 0.1 ; 0.2 ; 1" />
</path>
</g>
</svg>


.st0{fill:#232323;}
.st1{fill:#FFFFFF;}
#keyframes open {
0% { ry: 61.7; }
95% { ry: 61.7; }
100% { ry: 0; }
}
.left-eye, .right-eye {
animation-name: open;
animation-duration: 2s;
animation-iteration-count: infinite;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 752.9 752.9" style="enable-background:new 0 0 752.9 752.9;" xml:space="preserve">
<g id="circle" transform="translate(-17.5 -17.5) scale(0.3431372549019608)">
<g>
<circle vector-effect="non-scaling-stroke" class="st0" cx="1148.1" cy="1148.1" r="1097.1"/>
</g>
</g>
<g id="icon" transform="translate(-16.325252525252523 -16.361616161616162) scale(0.3232323232323232)">
<g>
<ellipse class="st1 left-eye" cx="998.4" cy="1304.6" rx="41.1" ry="61.7"/>
<ellipse class="st1 right-eye" cx="1409.8" cy="1304.6" rx="41.1" ry="61.7"/>
<path class="st1" d="M1368.7,1510.3h-329.1c-11.4,0-20.6,9.2-20.6,20.6c0,11.4,9.2,20.6,20.6,20.6h329.1
c11.4,0,20.6-9.2,20.6-20.6C1389.3,1519.5,1380,1510.3,1368.7,1510.3z"/>
<path class="st1" d="M1753.5,816.9l-287.9-288c-3.9-3.8-9.1-5.9-14.6-6H751.5c-56.8,0-102.8,46.1-102.9,102.9v1152
c0.1,56.8,46.1,102.8,102.9,102.9h905.1c56.8,0,102.8-46.1,102.9-102.9V831.5c0-2.7-0.5-5.4-1.6-7.9
C1756.9,821.1,1755.4,818.8,1753.5,816.9L1753.5,816.9z M1533.2,810.9c-34.1,0-61.7-27.6-61.7-61.7V593.1l217.8,217.8H1533.2z
M1656.7,1839.5H751.5c-34.1,0-61.7-27.6-61.7-61.7v-1152c0-34.1,27.6-61.7,61.7-61.7h678.9v185.2
c0.1,56.8,46.1,102.8,102.9,102.9h185.2v925.7C1718.4,1811.8,1690.7,1839.4,1656.7,1839.5L1656.7,1839.5z"/>
</g>
</g>
</svg>

Related

SVG element disappears after apply rotate animation

When I am adding
<animateTransform attributeType="xml" attributeName="transform"
type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s"
additive="sum" repeatCount="indefinite" />
to <g id="icon-border"> element disappears.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65" height="65" viewBox="0 0 65 65">
<defs>
<filter id="Ellipse_320" x="0" y="0" width="65" height="65" filterUnits="userSpaceOnUse">
<feOffset input="SourceAlpha"/>
<feGaussianBlur stdDeviation="7.5" result="blur"/>
<feFlood flood-color="#dec652" flood-opacity="0.478"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
<style>
</style>
</defs>
<g id="Group_470" data-name="Group 470" transform="translate(-1646.5 -154.5)">
<g transform="matrix(1, 0, 0, 1, 1646.5, 154.5)" filter="url(#Ellipse_320)">
<circle id="Ellipse_320-2" data-name="Ellipse 320" cx="10" cy="10" r="10" transform="translate(22.5 22.5)" fill="#dec652"/>
</g>
<g id="icon-border" transform="translate(1666 174)" fill="none" stroke="#dec652" stroke-width="1" stroke-dasharray="10">
<circle cx="13" cy="13" r="13" stroke="none"/>
<circle cx="13" cy="13" r="12.5" fill="none"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" repeatCount="indefinite" />
</g>
<g id="text-change-accept-svgrepo-com" transform="translate(1673.811 182.551)">
<path id="Path_11" data-name="Path 11" d="M14.907,12A2.907,2.907,0,1,1,12,14.907,2.907,2.907,0,0,1,14.907,12Zm1.4,1.663-2.163,2.163-.61-.813a.264.264,0,1,0-.423.317l.793,1.057a.264.264,0,0,0,.4.028l2.378-2.378a.264.264,0,0,0-.374-.374Z" transform="translate(-6.715 -8.3)" fill="#fff"/>
<path id="Path_12" data-name="Path 12" d="M6.767,17H2.529l-.062,0a.529.529,0,0,0,.062,1.054h4.32a3.446,3.446,0,0,1-.092-.793Q6.757,17.131,6.767,17Z" transform="translate(-2 -10.657)" fill="#fff"/>
<path id="Path_13" data-name="Path 13" d="M7.02,14.057H2.529A.529.529,0,0,1,2.467,13l.062,0H7.713A3.439,3.439,0,0,0,7.02,14.057Z" transform="translate(-2 -8.772)" fill="#fff"/>
<path id="Path_14" data-name="Path 14" d="M2.529,10.057A.529.529,0,0,1,2.467,9l.062,0h9.514a.529.529,0,0,1,.062,1.054l-.062,0Z" transform="translate(-2 -6.886)" fill="#fff"/>
<path id="Path_15" data-name="Path 15" d="M12.042,5H2.529L2.467,5a.529.529,0,0,0,.062,1.054h9.514l.062,0A.529.529,0,0,0,12.042,5Z" transform="translate(-2 -5)" fill="#fff"/>
</g>
</g>
</svg>

It this more like it? I removed many of the transform/translate.
The animation on <g id="icon-border"> was fine. You just need to place the child circles in 0,0 and then transform/translate the <g> to the center.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" viewBox="0 0 65 65">
<defs>
<filter id="Ellipse_320" x="0" y="0" width="65" height="65" filterUnits="userSpaceOnUse">
<feOffset input="SourceAlpha"/>
<feGaussianBlur stdDeviation="7.5" result="blur"/>
<feFlood flood-color="#dec652" flood-opacity="0.478"/>
<feComposite operator="in" in2="blur"/>
<feComposite in="SourceGraphic"/>
</filter>
</defs>
<g id="Group_470" data-name="Group 470">
<circle id="Ellipse_320-2" data-name="Ellipse 320" filter="url(#Ellipse_320)" cx="32.5" cy="32.5" r="10" fill="#dec652"/>
<g id="icon-border" transform="translate(32.5 32.5)" fill="none" stroke="#dec652" stroke-width="1" stroke-dasharray="10">
<circle cx="0" cy="0" r="13" stroke="none"/>
<circle cx="0" cy="0" r="12.5"/>
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" dur="0.5s" additive="sum" repeatCount="indefinite" />
</g>
<g id="text-change-accept-svgrepo-com" transform="translate(27.5 28.5)">
<path id="Path_11" data-name="Path 11" d="M14.907,12A2.907,2.907,0,1,1,12,14.907,2.907,2.907,0,0,1,14.907,12Zm1.4,1.663-2.163,2.163-.61-.813a.264.264,0,1,0-.423.317l.793,1.057a.264.264,0,0,0,.4.028l2.378-2.378a.264.264,0,0,0-.374-.374Z" transform="translate(-6.715 -8.3)" fill="#fff"/>
<path id="Path_12" data-name="Path 12" d="M6.767,17H2.529l-.062,0a.529.529,0,0,0,.062,1.054h4.32a3.446,3.446,0,0,1-.092-.793Q6.757,17.131,6.767,17Z" transform="translate(-2 -10.657)" fill="#fff"/>
<path id="Path_13" data-name="Path 13" d="M7.02,14.057H2.529A.529.529,0,0,1,2.467,13l.062,0H7.713A3.439,3.439,0,0,0,7.02,14.057Z" transform="translate(-2 -8.772)" fill="#fff"/>
<path id="Path_14" data-name="Path 14" d="M2.529,10.057A.529.529,0,0,1,2.467,9l.062,0h9.514a.529.529,0,0,1,.062,1.054l-.062,0Z" transform="translate(-2 -6.886)" fill="#fff"/>
<path id="Path_15" data-name="Path 15" d="M12.042,5H2.529L2.467,5a.529.529,0,0,0,.062,1.054h9.514l.062,0A.529.529,0,0,0,12.042,5Z" transform="translate(-2 -5)" fill="#fff"/>
</g>
</g>
</svg>

Shifting SVG by fixed number of pixels

The SVG example currently visually looks perfect except I want to achieve the same result without padding.
The padding's purpose is to force the red/blue lines 40px to the right to make space for the axis whilst also stopping it from overflowing on the right side of the graph.
I'm trying to remove the padding, but then I need to find a new way to shift JUST the "lines" 40px to the right without using x="40px" width="calc(100% - 40px)" because this syntax also isn't compatible with Sharp, or older browsers.
Is there any way to remove the padding and shift the lines 40px right whilst also constraining it within the box model of the SVG?
(final note: I don't want to use 'responsive' units in any logic that moves the lines)
JSFiddle of line graph: https://jsfiddle.net/Lefsqo3j/14/
<div style="height:148px;width:300px;overflow:hidden;resize:both">
<svg overflow="visible" style="padding:24px 0px 24px 40px" height="100%" width="100%">
<svg role="img" viewBox="0 0 300 100" preserveAspectRatio="none">
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<line y1="0" y2="100" x1="0" x2="0" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="75" x2="75" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="150" x2="150" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="225" x2="225" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="300" x2="300" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="0" y2="0" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="25" y2="25" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="50" y2="50" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="75" y2="75" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="100" y2="100" stroke-width="0.2" stroke="black"></line>
</svg>
</svg>
<svg x="100%" overflow="visible">
<text text-anchor="end" dy="-8px">
<tspan fill="red"> ⬤</tspan>
Line A<tspan fill="blue"> ⬤</tspan>
Line B
</text>
</svg>
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<path
d="M 0 75 M 0 75 L 75 50 L 150 15 L 225 67 L 300 67 L 300 67"
stroke-width="3"
stroke="red"
fill="transparent"
vector-effect="non-scaling-stroke"
></path>
<path
d="M 0 92 M 0 92 L 75 72 L 150 80 L 225 50 L 300 50 L 300 50"
stroke-width="3"
stroke="blue"
fill="transparent"
></path>
</svg>
<svg overflow="visible">
<text x="0%" text-anchor="end" y="0%">
40
</text>
<text x="0%" text-anchor="end" y="25%">
30
</text>
<text x="0%" text-anchor="end" y="50%">
20
</text>
<text x="0%" text-anchor="end" y="75%">
10
</text>
<text x="0%" text-anchor="end" y="100%">
0
</text>
<g style="transform: translateX(0%);">
<text y="100%" dy="16px">
5
</text>
</g>
<g style="transform: translateX(25%);">
<text y="100%" dy="16px">
10
</text>
</g>
<g style="transform: translateX(50%); ">
<text y="100%" dy="16px">
15
</text>
</g>
<g style="transform: translateX(75%); ">
<text y="100%" dy="16px">
20
</text>
</g>
<g text-anchor="end" style="transform: translateX(100%);">
<text y="100%" dy="16px">
25
</text>
</g>
</svg>
</svg>
</div>

I've modified the SVG and brought the content inside the content box. Dimensions scale uniformly maintaining aspect ratio.
<div style="height:148px;
width:300px;
overflow:hidden;
resize:both;
background-color: wheat;
">
<svg class="chart" overflow="visible">
<style>
.chart {
width: 100%;
height: 100%;
font-size: 14px;
padding-bottom: 24px;
}
/* background color for entire chart */
.chart-background {
fill: rgb(230, 249, 255);
}
/* styling for only the graph part */
.graph {
background-color: transparent;
}
/* grid lines style */
.chart .grid>line {
stroke-width: 0.5;
stroke: green;
}
.legend {
background-color: wheat;
}
.labels {
background-color: transparent !important;
}
.back {
background-color: wheat;
}
</style>
<rect class="chart-background" height="100%" width="100%" />
<svg viewBox="0 0 340 140" x="40" y="24" preserveAspectRatio="none">
<g class="grid">
<line y1="0" y2="100" x1="0" x2="0"></line>
<line y1="0" y2="100" x1="75" x2="75"></line>
<line y1="0" y2="100" x1="150" x2="150"></line>
<line y1="0" y2="100" x1="225" x2="225"></line>
<line y1="0" y2="100" x1="300" x2="300"></line>
<line x1="0" x2="300" y1="0" y2="0"></line>
<line x1="0" x2="300" y1="25" y2="25"></line>
<line x1="0" x2="300" y1="50" y2="50"></line>
<line x1="0" x2="300" y1="75" y2="75"></line>
<line x1="0" x2="300" y1="100" y2="100"></line>
</g>
</svg>
<svg>
<g class="legend">
<text x="100%" text-anchor="end" dy="16">
<tspan fill="red"> ⬤</tspan>Line A<tspan fill="blue"> ⬤</tspan>Line B
</text>
</g>
</svg>
<svg overflow="visible" x="40" y="24" height="70%" width="88%" style="margin-bottom: 24px;">
<g class="labels" style="font-size: 12px;">
<text x="0%" text-anchor="end" y="0%">40</text>
<text x="0%" text-anchor="end" y="25%">30</text>
<text x="0%" text-anchor="end" y="50%">20</text>
<text x="0%" text-anchor="end" y="75%">10</text>
<text x="0%" text-anchor="end" y="100%">0</text>
<text y="100%" dy="16px">5</text>
<text y="100%" dy="16px" x="22%">10</text>
<text y="100%" dy="16px" x="48%">15</text>
<text y="100%" dy="16px" x="74%">20</text>
<text y="100%" dy="16px" dx="-20px" x="100%">25</text>
</g>
</svg>
<svg viewBox="0 0 340 140" x="40" y="24" preserveAspectRatio="none">
<g class="plot">
<path d="M 0 75 M 0 75 L 75 50 L 150 15 L 225 67 L 300 67 L 300 67" stroke-width="3" stroke="red"
fill="transparent" vector-effect="non-scaling-stroke"></path>
<path d="M 0 92 M 0 92 L 75 72 L 150 80 L 225 50 L 300 50 L 300 50" stroke-width="3" stroke="blue"
fill="transparent"></path>
</g>
</svg>
</svg>
</div>
Sharpjs:
const svgBuffer = Buffer.from(svgImage);
const image = await sharp(svgBuffer, {})
.resize({ width: 500, fit: sharp.fit.inside, position: 'centre' })
.toFile('e:/svg-image.png');
Old answer
We can wrap the original svg content in a new <svg> tag. And with custom styles the original svg can be positioned such that overflow will be visible:
const sharp = require('sharp');
async function svgToImage(svgImage) {
try {
const wrapped = `<svg id='wrapper' width="600" height="400">
<style>
#wrapper > svg{
transform: scale(.9) translate(25px, 25px) ;
}
</style>
${svgImage}
</svg>`;
const svgBuffer = Buffer.from(wrapped);
//const image = await sharp(svgBuffer, {}).resize(500).toFile('e:/svg-image.png');
const image = await sharp({
create: {
width: 600,
height: 400,
channels: 4,
background: { r: 220, g: 255, b: 220, alpha: 1 },
},
})
.composite([{ input: svgBuffer, top: 0, left: 0 }])
.png()
.toFile('e:/svg-image.png');
} catch (error) {
console.log(error);
}
}
const svgImage = `
<svg overflow="visible" style="padding:24px 0px 24px 40px">
<svg role="img" viewBox="0 0 300 100" preserveAspectRatio="none">
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<line y1="0" y2="100" x1="0" x2="0" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="75" x2="75" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="150" x2="150" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="225" x2="225" stroke-width="0.2" stroke="black"></line>
<line y1="0" y2="100" x1="300" x2="300" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="0" y2="0" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="25" y2="25" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="50" y2="50" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="75" y2="75" stroke-width="0.2" stroke="black"></line>
<line x1="0" x2="300" y1="100" y2="100" stroke-width="0.2" stroke="black"></line>
</svg>
</svg>
<svg x="100%" overflow="visible">
<text text-anchor="end" dy="-8px">
<tspan fill="red"> ⬤</tspan>
Line A<tspan fill="blue"> ⬤</tspan>
Line B
</text>
</svg>
<svg viewBox="0 0 300 100" preserveAspectRatio="none">
<path
d="M 0 75 M 0 75 L 75 50 L 150 15 L 225 67 L 300 67 L 300 67"
stroke-width="3"
stroke="red"
fill="transparent"
vector-effect="non-scaling-stroke"
></path>
<path
d="M 0 92 M 0 92 L 75 72 L 150 80 L 225 50 L 300 50 L 300 50"
stroke-width="3"
stroke="blue"
fill="transparent"
></path>
</svg>
<svg overflow="visible">
<text x="0%" text-anchor="end" y="0%">40</text>
<text x="0%" text-anchor="end" y="25%">30</text>
<text x="0%" text-anchor="end" y="50%">20</text>
<text x="0%" text-anchor="end" y="75%">10</text>
<text x="0%" text-anchor="end" y="100%">0</text>
<text y="100%" dy="16px">5</text>
<text y="100%" dy="16px" x="25%">10</text>
<text y="100%" dy="16px" x="50%">15</text>
<text y="100%" dy="16px" x="75%">20</text>
<text y="100%" dy="16px" x="100%">25</text>
</svg>
</svg>`;
svgToImage(svgImage);
Output:
On x axis the labels didn't behave because of bug and bug related to transform. So I had to modify the x label tags.

Putting an outline on a mask in a SVG

Is it possible to put an outline or something on a mask so that you can actually see where the mask is? I have an element that I'm trying to mask, but I can't actually see if lining up to where it should.
What I'm trying to do is use the endScreen ID as a mask and using the startOrder ID for the object being masked. Right not it's masking it, but not correctly and it would be nice to visibly be able to see the mask where it is in the design.
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<style>
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
</style>
<defs>
<mask id="button-mask" width="1" height="1">
<path d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" />
<circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
<path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
<circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
<path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
</svg>

Define the path you want to use for the mask first as a template by itself, without any presentation attribute, and then reference it twice: first, inside the mask with fill="white", and then again with fill="none" stroke="blue" on top off your grafic.
You'll note your path isn't closed, but obviously a fill will create an implicit close between the endpoints, which the stroke doesn't show. An easy solution that changes effectively nothing for your mask is to add a z command at the end of the path definition.
.st0 {
fill: #fff
}
.st5 {
fill: #c32034
}
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
<defs>
<path id="shape" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
<mask id="button-mask" width="1" height="1">
<use href="#shape" fill="white" />
</mask>
</defs>
<path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" />
<circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
<path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
<path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />
<circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
<path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
<path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
<path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
<circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
<path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
<use href="#shape" fill="none" stroke="blue" />
</svg>
It might be worth noting that this is a solution only fitting for your specific situation. If the mask had a stroke defined, another stroke around that one cannot be shown like that. Effectively, the technique is more fit for a clip-path (that is pure form) than a mask (which is a arbitrary grafical structure).

How to make the following SVG fit its parent (horizontally and vertically)?

Live reproduction: https://codepen.io/alexcheninfo/pen/dZqmLv
This is the SVG:
<svg class="line-chart" width="860" height="405"></svg>
This is the CSS of the container:
.common-section {
position: relative;
width: 100%;
background-color: red;
margin-bottom: 30px;
}
Screenshot:

Two things:
You are missing the viewBox attribute.
Adding preserveAspectRatio="xMidYMid meet" will maintain the original aspect ratio as the image scales. If you need to support IE 11 or below, then you either need to use CSS to preserve the aspect ratio (see http://www.mademyday.de/css-height-equals-width-with-pure-css.html) or you could use JS to automate that for you (see https://gist.github.com/Heydon/369185d08d9ce2426f01863625e95525).
Here’s a working version of your CodePen demo:
https://codepen.io/tedw/pen/YEOLPr?editors=1100
FWIW, here are some good resources regarding scaling SVGs:
https://css-tricks.com/scale-svg/
https://codepen.io/jonitrythall/post/preserveaspectratio-in-svg
Hope that helps!
UPDATE:
I imported your SVG into Illustrator and did some optimization (including running it through https://jakearchibald.github.io/svgomg/). Here’s the final code:
<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 522 213" preserveAspectRatio="xMidYMid meet" style="font-family: Helvetica, sans-serif; font-size: 6px;" fill="#000">
<g transform="translate(20 60)">
<path d="M490 128.2l-71.2 5-71-.3L63-57l-71 176.3"/>
<circle cx="489.9" cy="128.2" r="3"/>
<circle cx="418.8" cy="133.4" r="3"/>
<circle cx="347.7" cy="132.9" r="3"/>
<circle cx="63.2" cy="-57" r="3"/>
<circle cx="-7.9" cy="119.3" r="3"/>
</g>
<text transform="translate(498.37 210.08)">17/10/18</text>
<text transform="translate(427.266 210.08)">17/10/17</text>
<text transform="translate(356.16 210.08)">17/10/16</text>
<text transform="translate(71.735 210.08)">17/10/12</text>
<text transform="translate(.85 210.08)">17/10/11</text>
<text transform="translate(0 201.83)">0</text>
<text transform="translate(0 179.485)">100</text>
<text transform="translate(0 157.137)">200</text>
<text transform="translate(0 134.793)">300</text>
<text transform="translate(0 112.47)">400</text>
<text transform="translate(0 90.123)">500</text>
<text transform="translate(0 67.78)">600</text>
<text transform="translate(0 45.435)">700</text>
<text transform="translate(0 23.095)">800</text>
<g fill="none" stroke="#000">
<path d="M12 200.6h498"/>
<path d="M12 178.3h498"/>
<path d="M12 156h498"/>
<path d="M12 133.6h498"/>
<path d="M12 111.3h498"/>
<path d="M12 89h498"/>
<path d="M12 66.6h498"/>
<path d="M12 44.3h498"/>
<path d="M12 21.8h498"/>
</g>
</svg>

svg code HTML 5 path golden spiral

i am looking to create a text animation along a spiral path
something on the lines of this http://www.html5canvastutorials.com/labs/html5-canvas-spiral-text/
my attempt is to make the path a golden spiral instead of the one in the above code. the svg code for the golden spiral is given below... i have tried replacing the path data, but only the first curve loads...
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!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" x="0px" y="0px"
width="1024px" height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="ARC">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M32,87.344c0,327.678,265.635,593.313,593.313,593.313"/>
</g>
<g id="ARC_1_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M625.313,680.656C827.829,680.656,992,516.485,992,313.969"/>
</g>
<g id="ARC_2_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M992,313.969c0-125.162-101.464-226.625-226.625-226.625"/>
</g>
<g id="ARC_3_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M765.375,87.344c-77.354,0-140.063,62.708-140.063,140.062"/>
</g>
<g id="ARC_4_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M625.313,227.406c0,47.808,38.756,86.563,86.563,86.563"/>
</g>
<g id="ARC_5_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M711.876,313.969c29.546,0,53.499-23.953,53.499-53.5"/>
</g>
<g id="ARC_6_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M765.375,260.47c0-18.261-14.804-33.064-33.064-33.064"/>
</g>
<g id="ARC_7_">
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M732.311,227.406c-11.286,0-20.435,9.149-20.435,20.435"/>
</g>
</svg>

Simply append the paths' d attribute and delete the rest of your arcs:
<path fill="none" stroke="#000000" stroke-width="0.7087" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M32,87.344c0,327.678,265.635,593.313,593.313,593.313
M625.313,680.656C827.829,680.656,992,516.485,992,313.969
M992,313.969c0-125.162-101.464-226.625-226.625-226.625
M765.375,87.344c-77.354,0-140.063,62.708-140.063,140.062
M625.313,227.406c0,47.808,38.756,86.563,86.563,86.563
M711.876,313.969c29.546,0,53.499-23.953,53.499-53.5
M765.375,260.47c0-18.261-14.804-33.064-33.064-33.064
M732.311,227.406c-11.286,0-20.435,9.149-20.435,20.435
"/>