#html #css #svg
Вопрос:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 596.97 663.91" style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
@keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24 264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/></g>
</g>
</svg>
Я пытаюсь вставить анимированный логотип на свой сайт. Логотип правильно анимирован, и после его визуализации в CodePen я подумал, что все в порядке, но по какой-то причине на реальных сайтах он просто показывает ошибку. Вот так:
Эта страница содержит следующие ошибки: ошибка в строке 75 в столбце 6: Несоответствие открывающего и заканчивающего тега: строка svg 0 и g Ниже — отображение страницы до первой ошибки.
Есть какие-нибудь идеи?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 596.97 663.91" style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
@keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24 264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/></g>
</g>
</svg> Ответ №1:
В конце был дополнительный закрывающий тег группы, и в объявлении XML была какая-то ошибка, хотя я не уверен, в чем дело. В любом случае, этот приведенный ниже код сейчас работает нормально. Наслаждайтесь 🙂
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.2.1, SVG Export Plug-In . SVG Version: 6.00 Build
0) -->
<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 596.97 663.91"
style="enable-background:new 0 0 596.97 663.91;" xml:space="preserve">
<style type="text/css">
#fs{
fill: black;
transition: 0.2s ease-in;
}
#fs:hover {
fill:white;
transition: 1s ease-in;
cursor: pointer;
}
.logo:hover .path {
animation: draw 1.5s forwards;
}
@keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
</style>
<g class="logo">
<polygon id="l" class="path" stroke="black" stroke-width="4" stroke-
linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-
dasharray="400" stroke-dashoffset="400" fill="none" points="310.71,174.24
264.83,174.24 264.83,78.12 235.86,78.12 235.86,199.58 310.71,199.58 "/>
<rect id="flip-i" class="path" stroke="black" stroke-width="4" stroke-
linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="350" stroke-dashoffset="350" fill="none" x="330.35" y="78.11" width="28.96" height="121.46"/>
<g>
<g>
<path id="p" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M447.88,128.3c-2.68,2.93-6.65,4.39-11.9,4.39h-17.47v-29.51h17.47c5.25,0,9.22,1.48,11.9,4.44
c2.68,2.96,4.03,6.43,4.03,10.41C451.91,121.96,450.56,125.38,447.88,128.3z M469.28,88.21c-8.21-6.73-19.31-10.09-33.3-10.09
h-46.62v121.46h29.15v-41.55h17.47c14,0,25.1-3.39,33.3-10.18c8.21-6.79,12.31-16.73,12.31-29.82
C481.59,104.88,477.49,94.94,469.28,88.21z"/>
<path id="fs" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="1050" stroke-dashoffset="1050" fill="black" d="M135.52,281.32c5.46,3.89,12.27,5.84,20.41,5.84c7.6,0,14.12-2.28,19.55-6.83
c5.43-4.56,10.17-11.48,14.21-20.77l11.86-27.97c1.57-3.56,3.02-6.23,4.35-8.01s3.14-2.67,5.43-2.67c2.48,0,4.54,1.39,6.2,4.16
c1.66,2.77,2.49,6.43,2.49,10.95c0,6.28-1.36,10.82-4.07,13.62c-2.71,2.81-6.06,4.57-10.04,5.29v28.42
c12.91-0.97,22.85-5.4,29.82-13.3c6.97-7.91,10.45-19.25,10.45-34.03c0-14.54-3.15-25.99-9.46-34.35
c-6.31-8.36-14.59-12.54-24.85-12.54c-8.75,0-15.66,2.41-20.72,7.24c-5.07,4.83-9.47,11.58-13.22,20.28l-11.49,26.43
c-1.87,4.65-3.53,7.86-4.98,9.64c-1.45,1.78-3.65,2.67-6.61,2.67c-2.42,0-4.31-0.85-5.7-2.53c-1.39-1.69-2.35-3.91-2.9-6.65
c-0.55-2.75-0.81-5.69-0.81-8.82c0-3.92,0.57-7.5,1.72-10.73c1.15-3.23,2.93-5.78,5.34-7.65c2.42-1.87,5.46-2.81,9.14-2.81
v-16.62h0.01V151.7h44.98v-24.71h-44.98v-23.8h50.23V78.11h-79.19v121.11c-3.97,3.97-7.04,8.68-9.2,14.17
c-2.92,7.42-4.39,15.47-4.39,24.16c0,10.5,1.37,19.45,4.12,26.84C125.95,271.78,130.05,277.43,135.52,281.32"/>
</g>
</g>
<rect id="side-i" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="800" stroke-dashoffset="800" fill="none" x="121.98" y="313.49" width="349.8" height="28.96"/>
<path id="d" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="500" stroke-dashoffset="500" fill="none" d="M148.41,402.19h68.42v14.03c0,6.57-1.46,12.26-4.39,17.06c-2.93,4.8-6.95,8.51-12.08,11.13
c-5.13,2.63-11.07,3.94-17.83,3.94c-6.52,0-12.34-1.31-17.47-3.94s-9.19-6.34-12.17-11.13c-2.99-4.8-4.48-10.49-4.48-17.06V402.19z
M121.98,416.22c0,12.49,2.46,23.5,7.37,33.04c4.92,9.53,11.92,17,21,22.4c9.08,5.4,19.8,8.1,32.18,8.1
c12.55,0,23.37-2.7,32.45-8.1c9.08-5.4,16.09-12.87,21.04-22.4c4.95-9.53,7.42-20.54,7.42-33.04v-42.99l-121.46,0V416.22z"/>
<polygon id="e" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="650" stroke-dashoffset="650" fill="none" points="121.98,583.57 147.32,583.57 147.32,531.34 169.86,531.34 169.86,580.31 195.02,580.31 195.02,531.34
218.37,531.34 218.37,583.57 243.44,583.57 243.44,502.38 121.98,502.38 "/>
<path id="t" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M285.06,418.85c-0.99,0.22-1.97,0.34-2.96,0.34c-3.2,0-4.81-1.69-4.81-5.07V391.5h11.14v-6.58h-11.14v-10.89h-9.96v10.89
h-5.74v6.58h5.74v22.96c0,2.87,0.6,5.23,1.79,7.09c1.2,1.86,2.8,3.24,4.81,4.14c2.01,0.9,4.23,1.35,6.65,1.35
c1.63,0,3.19-0.21,4.69-0.63c1.49-0.42,3.02-0.94,4.6-1.56l-1.43-7.01C287.17,418.29,286.04,418.62,285.06,418.85z"/>
<path id="o" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M324.71,412.56c-0.89,1.91-2.1,3.36-3.63,4.32c-1.53,0.97-3.28,1.46-5.25,1.46c-2.95,0-5.3-1.08-7.03-3.25
c-1.73-2.16-2.59-5.39-2.59-9.66c0-2.9,0.44-5.32,1.33-7.26c0.89-1.95,2.1-3.4,3.65-4.37c1.55-0.97,3.32-1.46,5.32-1.46
c2.96,0,5.28,1.1,6.98,3.29c1.7,2.19,2.56,5.46,2.56,9.79C326.04,408.27,325.6,410.65,324.71,412.56z M326.18,386.1
c-3-1.57-6.34-2.36-10.02-2.36c-3.74,0-7.12,0.79-10.15,2.36c-3.03,1.58-5.42,3.97-7.2,7.18c-1.77,3.2-2.66,7.26-2.66,12.15
c0,4.81,0.89,8.81,2.66,12c1.77,3.19,4.17,5.59,7.2,7.2c3.03,1.6,6.41,2.41,10.15,2.41c3.69,0,7.03-0.8,10.02-2.41
c3-1.6,5.38-4,7.15-7.2c1.77-3.19,2.66-7.2,2.66-12c0-4.9-0.89-8.95-2.66-12.15C331.56,390.07,329.18,387.67,326.18,386.1z"/>
<path id="u" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M375.07,404.33c0,2.98-0.48,5.48-1.45,7.49c-0.97,2.01-2.27,3.53-3.89,4.56c-1.62,1.03-3.41,1.54-5.38,1.54
c-2.31,0-4.12-0.67-5.44-2c-1.32-1.34-1.98-3.34-1.98-6.01v-25.15h-9.96v26.16c0,3.78,0.69,6.81,2.07,9.12
c1.38,2.31,3.25,3.98,5.62,5.02c2.36,1.04,5.01,1.56,7.93,1.56c2.98,0,5.61-0.82,7.89-2.45c1.87-1.34,3.39-3.27,4.6-5.73v7.42h9.96
v-41.1h-9.96V404.33z"/>
<path id="r" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M421.75,384.16c-2.5,0-4.78,0.85-6.82,2.56c-1.71,1.43-3.11,3.53-4.24,6.24v-8.2h-9.96v41.1h9.96v-17.98
c0-3.01,0.37-5.54,1.12-7.59c0.75-2.06,1.86-3.61,3.33-4.67c1.48-1.06,3.32-1.58,5.51-1.58c0.67,0,1.44,0.06,2.28,0.17
c0.84,0.11,1.63,0.25,2.36,0.42l0.17-9.96c-0.59-0.17-1.19-0.29-1.79-0.38C423.06,384.2,422.42,384.16,421.75,384.16z"/>
<path id="s" class="path" stroke="black" stroke-width="4" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="300" stroke-dashoffset="300" fill="none" d="M456.4,403.82l-9.71-3.63c-3.32-0.99-4.98-2.45-4.98-4.39c0-1.15,0.6-2.16,1.8-3.01c1.2-0.86,2.85-1.29,4.96-1.29
c2.34,0,4.08,0.39,5.23,1.18c1.16,0.79,1.8,1.86,1.94,3.21H465c-0.08-3.52-1.55-6.42-4.41-8.71c-2.86-2.29-6.9-3.44-12.13-3.44
c-5.26,0-9.46,1.07-12.6,3.19c-3.14,2.12-4.7,4.92-4.7,8.38c0,2.62,0.85,4.87,2.57,6.75c1.72,1.88,4.18,3.4,7.39,4.55l8.95,3.21 c1.83,0.56,3.16,1.17,3.99,1.84c0.83,0.66,1.25,1.57,1.25,2.72c0,0.9-0.31,1.72-0.93,2.45c-0.62,0.73-1.48,1.31-2.59,1.73
c-1.11,0.42-2.38,0.64-3.82,0.64c-2.62,0-4.69-0.47-6.2-1.39c-1.52-0.93-2.32-2.4-2.4-4.43h-9.2c0.03,2.87,0.8,5.32,2.32,7.36 c1.52,2.04,3.69,3.6,6.52,4.68s6.21,1.63,10.15,1.63c3.4,0,6.4-0.61,8.99-1.81c2.59-1.21,4.61-2.78,6.06-4.71
c1.45-1.93,2.17-3.97,2.17-6.14c0-2.59-0.87-4.73-2.62-6.42C461.99,406.27,459.55,404.89,456.4,403.82z"/>
</g>
</svg>