SVG not rendering only in in Safari (v10) - html

I have an SVG file (source below) which I tried to use in 2 ways on my website:
(1) As an image
<img src="/images/icons/play-button.svg">
(1) As abackground image
<div class="play-button"></div>
and CSS:
.play-button {
background: url('/images/icons/play-button.svg') no-repeat 0 0;
background-size: 196px 96px;
width: 196px;
height: 96px;
}
In any of the cases above, the SVG is not rendered in Safari 10 (both on a Mac and an iPad). Other browsers (Chrome, Firefox, IE) render the image correctly.
Also, I tried using other SVGs which worked just fine. The difference between the failng SVG and the other ones is the the former has text transformed to paths, but I'm not sure whether that's a real problem.
What might be the reason of Safari failing to render the image?
The SVG source:
<svg xmlns="http://www.w3.org/2000/svg" width="196" height="96" viewBox="0 0 196 96">
<g fill="#FFF" fill-rule="evenodd" style="mix-blend-mode:darken">
<path fill-rule="nonzero" d="M94.89 62.883s-.146 7.214-2.024 10.59c-2.349 4.388-6.074 6.2-7.706 6.854-.547.183-1.107.387-1.671.574l-.005-.017c-.74.271-1.58.243-2.306-.177-1.326-.765-1.782-2.468-1.012-3.777a2.7 2.7 0 0 1 1.504-1.198l-.009-.034c.084-.022.181-.066.265-.089 1.355-.543 4.402-1.378 6.34-5.005 1.549-2.783.894-7.993.894-7.993s-.873-6.09-2.45-11.975l-2.205-8.228c-1.58-5.902-3.866-11.596-3.866-11.596s-2.037-4.84-4.77-6.475c-3.492-2.172-6.549-1.372-7.993-1.165-10.19 1.899-27.236 6.466-27.236 6.466s-17.047 4.568-26.846 7.989c-1.355.543-4.402 1.378-6.34 5.006-1.549 2.782-.91 7.996-.91 7.996s.872 6.091 2.45 11.976l2.204 8.228c1.581 5.901 3.866 11.596 3.866 11.596s2.038 4.84 4.77 6.474c3.492 2.173 7.044 1.131 8.727 1.005 5.882-.98 26.536-6.315 26.536-6.315a2.801 2.801 0 0 1 3.42 1.975 2.801 2.801 0 0 1-1.974 3.42.384.384 0 0 1-.14.02c-1.707.44-21.325 5.461-28.11 6.575-2.022.144-6.754.761-10.986-1.882-3.315-1.985-7.03-8.164-7.03-8.164S7.87 80.001 5.956 72.852l-2.517-9.391C1.53 56.328.834 50.298.834 50.298s.16-7.163 2.037-10.54c2.332-4.383 6.065-6.233 7.697-6.887 11.833-4.128 28.61-8.624 28.61-8.624l.033-.009s16.777-4.495 29.089-6.836c1.74-.25 5.88-.51 10.108 2.116 3.315 1.985 7.039 8.126 7.039 8.126s2.41 5.553 4.325 12.702l2.516 9.391C94.2 56.87 94.89 62.883 94.89 62.883zM65.887 80.702a2.801 2.801 0 0 1 3.42 1.975 2.801 2.801 0 0 1-1.974 3.42 2.801 2.801 0 0 1-3.42-1.974 2.801 2.801 0 0 1 1.974-3.421zM50.132 70.123l-.012.021a2.78 2.78 0 0 1-1.262.754 2.764 2.764 0 0 1-3.378-1.95 2.734 2.734 0 0 1 .806-2.728L58.079 55.2s-.038-.009-.022-.013a1.38 1.38 0 0 0 .434-1.417 1.372 1.372 0 0 0-.965-.97l-18.41-4.302a1.255 1.255 0 0 0-.627.023 1.38 1.38 0 0 0-.993 1.622l4.472 16.692-.033.009.009.034a2.801 2.801 0 0 1-1.975 3.42 2.801 2.801 0 0 1-3.42-1.975L31.514 49.54a5.692 5.692 0 0 1 4.024-6.97 5.616 5.616 0 0 1 3.045.034c.038.008.055.004.072 0l21.488 5.735c.451.132.894.302 1.322.55a5.594 5.594 0 0 1 2.046 7.637 5.86 5.86 0 0 1-.799 1.064L50.237 70.04a.851.851 0 0 0-.105.083z"/>
<path d="M96.976 18.137a1.945 1.945 0 0 0-.856-.367 2.159 2.159 0 0 0-.867.059 1.888 1.888 0 0 0-.737.371c-.202.17-.357.387-.463.65a2.443 2.443 0 0 0-.155.936c.003.361.065.77.188 1.23.125.463.267.846.428 1.148.161.302.338.536.532.702.194.166.403.267.628.304.225.036.461.021.709-.045.396-.106.712-.28.946-.519.234-.24.434-.544.6-.914l-.953-3.555zm.414-6.09l3.077 11.483-1.167.312c-.253.068-.444-.005-.573-.22l-.367-.72c-.221.45-.509.845-.863 1.183-.354.338-.806.58-1.358.728a2.716 2.716 0 0 1-1.262.049 2.745 2.745 0 0 1-1.141-.535c-.352-.273-.667-.643-.944-1.11-.277-.467-.502-1.025-.676-1.674a5.595 5.595 0 0 1-.2-1.702 4.127 4.127 0 0 1 .336-1.498c.2-.451.48-.837.841-1.157a3.21 3.21 0 0 1 1.323-.69c.443-.119.84-.15 1.192-.096.351.055.682.168.993.339l-1.12-4.18 1.909-.512zm8.243 6.47c-.544.174-.995.346-1.352.516-.358.17-.635.34-.833.51-.198.168-.326.338-.385.508a.851.851 0 0 0-.02.51c.089.336.252.549.49.64.236.09.514.094.834.008.391-.105.711-.266.959-.485.248-.218.47-.508.666-.87l-.359-1.336zm-5.295-2.266c.688-1.08 1.674-1.79 2.957-2.134a3.33 3.33 0 0 1 1.305-.106c.406.054.772.183 1.097.386.325.202.603.474.835.815.233.341.409.736.529 1.184l1.342 5.007-.866.232c-.18.048-.327.059-.439.03-.112-.027-.219-.116-.32-.266l-.323-.526a7.143 7.143 0 0 1-.46.633 3.58 3.58 0 0 1-.503.503 3.31 3.31 0 0 1-.604.39 3.94 3.94 0 0 1-.756.281c-.335.09-.657.128-.964.113a2.11 2.11 0 0 1-.843-.209 1.886 1.886 0 0 1-.66-.544 2.469 2.469 0 0 1-.42-.889c-.053-.2-.073-.41-.06-.626.014-.216.073-.435.177-.656a2.83 2.83 0 0 1 .454-.668c.2-.225.46-.444.78-.657.322-.213.707-.42 1.156-.62.448-.2.972-.389 1.57-.566l-.123-.463c-.143-.53-.361-.893-.656-1.088-.295-.194-.657-.234-1.084-.12-.31.084-.556.188-.74.315a3.276 3.276 0 0 0-.472.387c-.13.132-.249.25-.356.357a.863.863 0 0 1-.392.22.57.57 0 0 1-.368-.012.902.902 0 0 1-.29-.184l-.503-.52zm12.984-3.007a.527.527 0 0 1-.115.217.435.435 0 0 1-.203.108.706.706 0 0 1-.318.003c-.12-.023-.258-.049-.414-.076a3.48 3.48 0 0 0-.522-.046 2.356 2.356 0 0 0-.65.091c-.376.101-.65.26-.821.477a.772.772 0 0 0-.153.712c.046.17.14.298.281.384.142.086.316.149.522.187.207.039.435.062.686.07.25.007.506.02.768.038.261.018.522.049.782.092.26.044.504.122.73.235.226.114.425.269.597.466.171.197.3.455.385.774.103.382.129.752.078 1.11a2.36 2.36 0 0 1-.383.997 2.962 2.962 0 0 1-.846.815 4.463 4.463 0 0 1-1.31.562 4.47 4.47 0 0 1-.82.141c-.273.021-.542.02-.805-.004a4.294 4.294 0 0 1-.747-.13 3.34 3.34 0 0 1-.64-.243l.245-.844a.645.645 0 0 1 .147-.255.583.583 0 0 1 .275-.148.639.639 0 0 1 .363.01c.124.039.266.078.425.118.16.04.343.068.55.085.205.016.452-.014.74-.091.227-.061.415-.14.562-.238.148-.097.263-.204.345-.32a.826.826 0 0 0 .15-.367.947.947 0 0 0-.022-.38.664.664 0 0 0-.289-.41 1.505 1.505 0 0 0-.523-.192 4.404 4.404 0 0 0-.69-.068 21.41 21.41 0 0 1-.779-.035 6.883 6.883 0 0 1-.796-.097 2.536 2.536 0 0 1-.739-.254 1.973 1.973 0 0 1-.608-.508c-.177-.217-.313-.501-.406-.851a2.364 2.364 0 0 1-.056-.98c.05-.328.171-.635.362-.92a2.92 2.92 0 0 1 .794-.777 4.032 4.032 0 0 1 1.242-.543 4.102 4.102 0 0 1 1.564-.13c.496.06.933.198 1.31.411l-.248.804zm10.548-2.827a.527.527 0 0 1-.115.218.435.435 0 0 1-.203.108.706.706 0 0 1-.319.002c-.119-.023-.257-.048-.413-.075a3.48 3.48 0 0 0-.522-.047 2.356 2.356 0 0 0-.65.092c-.377.1-.65.26-.821.477a.772.772 0 0 0-.153.711c.046.17.14.299.281.385.142.086.316.148.522.187.207.039.435.062.685.069.25.007.507.02.769.038.261.019.522.05.782.093.26.044.504.122.73.235.226.113.425.269.597.466.171.197.3.455.385.774.103.381.128.751.078 1.11a2.36 2.36 0 0 1-.383.997 2.962 2.962 0 0 1-.846.815 4.463 4.463 0 0 1-1.31.562 4.47 4.47 0 0 1-.82.141c-.274.02-.542.02-.805-.004a4.294 4.294 0 0 1-.747-.13 3.34 3.34 0 0 1-.64-.243l.245-.845a.645.645 0 0 1 .147-.255.583.583 0 0 1 .275-.148.639.639 0 0 1 .363.01c.124.04.266.079.425.119.16.04.343.068.549.085.206.016.453-.014.742-.092.226-.06.414-.14.561-.237.148-.098.263-.204.345-.32a.826.826 0 0 0 .15-.368.947.947 0 0 0-.023-.379.664.664 0 0 0-.288-.41 1.505 1.505 0 0 0-.523-.192 4.404 4.404 0 0 0-.69-.068 21.41 21.41 0 0 1-.779-.035 6.883 6.883 0 0 1-.796-.098 2.536 2.536 0 0 1-.739-.253 1.973 1.973 0 0 1-.608-.508c-.177-.218-.313-.501-.406-.852a2.364 2.364 0 0 1-.056-.979c.05-.328.171-.635.362-.92a2.92 2.92 0 0 1 .794-.777 4.032 4.032 0 0 1 1.242-.544 4.102 4.102 0 0 1 1.564-.129c.496.06.933.197 1.31.41l-.248.804zm6.947 1.353c-.544.173-.995.345-1.353.515-.357.17-.635.34-.832.51-.198.168-.326.338-.386.508a.851.851 0 0 0-.02.51c.09.336.253.549.49.64.237.091.515.094.834.008.392-.105.712-.266.96-.485.248-.218.47-.508.665-.87l-.358-1.336zm-5.295-2.267c.688-1.079 1.674-1.79 2.956-2.134a3.33 3.33 0 0 1 1.305-.105c.407.054.773.182 1.098.385.324.203.603.474.835.815.232.341.408.736.528 1.184l1.342 5.007-.865.232c-.18.048-.327.059-.44.03-.112-.027-.218-.116-.32-.266l-.322-.526a7.143 7.143 0 0 1-.46.633 3.58 3.58 0 0 1-.503.503 3.31 3.31 0 0 1-.604.39 3.94 3.94 0 0 1-.757.281c-.335.09-.656.128-.963.113a2.11 2.11 0 0 1-.843-.209 1.886 1.886 0 0 1-.66-.544 2.469 2.469 0 0 1-.42-.889c-.054-.2-.074-.41-.06-.626.014-.216.073-.435.176-.656a2.83 2.83 0 0 1 .455-.668c.2-.225.46-.444.78-.657.322-.213.707-.42 1.155-.62.45-.2.973-.389 1.571-.565l-.124-.464c-.142-.53-.36-.893-.656-1.087-.295-.195-.656-.235-1.083-.12-.31.083-.556.188-.74.314a3.276 3.276 0 0 0-.472.388l-.356.356a.863.863 0 0 1-.392.22.57.57 0 0 1-.368-.012.902.902 0 0 1-.29-.184l-.503-.52zm11.64-.262c.238-.063.435-.15.593-.262.158-.112.28-.24.365-.384.086-.144.137-.304.153-.48.017-.175 0-.358-.052-.549-.105-.392-.305-.67-.6-.837-.297-.166-.679-.187-1.148-.061-.469.125-.79.334-.962.626-.173.292-.207.634-.102 1.026.05.185.125.35.227.494.102.143.227.258.374.343.147.084.318.135.513.152.195.017.408-.006.64-.068zm3.366 3.935a.547.547 0 0 0-.24-.341.946.946 0 0 0-.44-.127 2.9 2.9 0 0 0-.593.03c-.22.032-.452.074-.695.125-.243.051-.494.106-.751.164a8.948 8.948 0 0 1-.763.138 1.85 1.85 0 0 0-.402.555.88.88 0 0 0-.048.609c.038.14.107.26.21.362.101.103.24.177.415.224.176.047.391.063.646.047.256-.016.558-.071.909-.165.355-.095.654-.205.897-.328a2.29 2.29 0 0 0 .578-.395.998.998 0 0 0 .276-.438.86.86 0 0 0 0-.46zm-.246-8.523l.19.711c.06.227-.038.403-.298.527l-.675.322c.181.244.315.529.402.853.105.392.121.767.05 1.126a2.446 2.446 0 0 1-.437.982 3.168 3.168 0 0 1-.848.778 4.141 4.141 0 0 1-1.176.51 4.355 4.355 0 0 1-.455.097c-.148.023-.295.04-.441.052-.207.216-.286.416-.236.602.042.16.147.257.314.292.167.036.375.036.626.002.25-.034.531-.088.842-.163.311-.075.633-.144.964-.205.332-.061.66-.1.987-.12.326-.018.63.01.909.084.279.075.524.212.735.412.211.2.367.488.468.865.094.35.098.713.014 1.089a2.837 2.837 0 0 1-.513 1.082c-.258.345-.605.66-1.04.945-.434.285-.955.508-1.563.671-.597.16-1.133.242-1.607.245-.474.002-.884-.053-1.23-.168a2.07 2.07 0 0 1-.835-.492 1.622 1.622 0 0 1-.428-.73c-.1-.371-.07-.712.087-1.022.157-.31.411-.592.763-.846a1.378 1.378 0 0 1-.618-.298c-.172-.147-.298-.368-.376-.661a1.157 1.157 0 0 1-.033-.385c.01-.138.04-.28.093-.427a1.91 1.91 0 0 1 .226-.437c.1-.145.225-.285.376-.42a2.59 2.59 0 0 1-1.178-.612c-.326-.299-.554-.69-.684-1.175a2.442 2.442 0 0 1-.049-1.125c.073-.36.22-.689.44-.988.22-.3.507-.56.859-.78a4.389 4.389 0 0 1 1.208-.515c.34-.091.669-.142.986-.152.318-.011.618.018.901.085l2.28-.61zm7.058 1.09a2.378 2.378 0 0 0-.291-.67 1.72 1.72 0 0 0-.468-.492 1.507 1.507 0 0 0-.633-.249 1.88 1.88 0 0 0-.784.057c-.552.148-.944.421-1.176.82-.233.4-.316.9-.249 1.5l3.601-.965zm-3.33 2.127c.14.399.306.731.498.997.193.266.408.47.645.614.237.144.496.229.777.256.28.027.575-.001.884-.084.31-.083.566-.19.771-.322.205-.133.38-.265.523-.397.144-.133.27-.252.376-.358a.765.765 0 0 1 .338-.206c.16-.043.295-.016.404.082l.735.549a3.293 3.293 0 0 1-.545.812 4.128 4.128 0 0 1-.715.622 4.657 4.657 0 0 1-.816.447c-.285.12-.567.218-.845.293a4.385 4.385 0 0 1-1.612.137 3.564 3.564 0 0 1-1.453-.48 3.941 3.941 0 0 1-1.183-1.107c-.343-.475-.607-1.06-.793-1.755a4.544 4.544 0 0 1-.147-1.596 3.8 3.8 0 0 1 .42-1.446c.233-.441.557-.827.974-1.16.416-.332.92-.578 1.512-.736.5-.134.983-.178 1.448-.132.465.047.89.183 1.277.408.386.225.725.537 1.017.937.292.399.514.885.668 1.456.077.289.098.492.063.609-.035.117-.14.199-.315.246L144.01 7.87zm7.703-5.526c.117-.202.246-.396.388-.58a3.273 3.273 0 0 1 1.048-.894c.212-.115.452-.208.72-.28a2.943 2.943 0 0 1 1.21-.088c.375.057.71.188 1.005.394.295.205.55.476.764.813.215.338.381.728.5 1.17l1.352 5.047-1.908.511-1.352-5.046c-.13-.484-.341-.829-.634-1.035-.293-.206-.666-.248-1.119-.127-.33.089-.619.246-.867.473a3.44 3.44 0 0 0-.656.83l1.537 5.734-1.91.511-2.123-7.928 1.166-.313c.248-.066.441.006.58.217l.3.591zm-48.507 31.624l2.124 7.929-1.167.312c-.252.068-.443-.005-.572-.219l-.301-.598c-.236.416-.523.779-.86 1.087-.337.309-.77.534-1.302.676a2.914 2.914 0 0 1-1.206.087 2.38 2.38 0 0 1-1.005-.397 2.82 2.82 0 0 1-.77-.817 4.182 4.182 0 0 1-.5-1.17l-1.35-5.039 1.909-.511 1.35 5.038c.13.485.342.83.637 1.035.296.205.667.247 1.115.127.33-.088.62-.244.869-.468.249-.225.468-.5.656-.826l-1.536-5.734 1.909-.512zm3.931-.01c.117-.202.246-.395.387-.58a3.273 3.273 0 0 1 1.048-.894c.213-.114.453-.207.72-.28a2.943 2.943 0 0 1 1.211-.087c.374.057.709.188 1.004.393.295.205.55.477.765.814.214.337.381.727.5 1.17l1.352 5.046-1.909.512-1.352-5.046c-.13-.484-.34-.83-.634-1.035-.292-.206-.665-.249-1.118-.127-.33.088-.62.246-.868.472a3.44 3.44 0 0 0-.655.83l1.536 5.734-1.909.511-2.124-7.928 1.167-.312c.247-.067.44.006.58.217l.299.59zm11.922-2.581a.527.527 0 0 1-.116.217.435.435 0 0 1-.203.108.706.706 0 0 1-.318.003c-.12-.023-.257-.049-.413-.076a3.48 3.48 0 0 0-.522-.046 2.356 2.356 0 0 0-.65.091c-.377.101-.65.26-.821.477a.772.772 0 0 0-.153.712c.045.17.139.298.28.384.143.086.317.149.523.187.206.039.435.062.685.07.25.007.507.02.768.038.262.018.523.049.783.092.26.044.503.122.73.236.226.113.425.268.597.465.171.197.3.455.385.775.102.38.128.75.078 1.11a2.36 2.36 0 0 1-.383.996 2.962 2.962 0 0 1-.846.815 4.463 4.463 0 0 1-1.311.563 4.47 4.47 0 0 1-.82.14c-.273.021-.54.02-.804-.003a4.294 4.294 0 0 1-.747-.132 3.34 3.34 0 0 1-.64-.242l.245-.844a.645.645 0 0 1 .147-.255.583.583 0 0 1 .275-.148.639.639 0 0 1 .363.01c.124.039.265.078.425.118.16.04.343.068.549.085.206.017.453-.014.741-.091.227-.06.414-.14.562-.238.148-.097.263-.204.345-.32a.826.826 0 0 0 .15-.367.947.947 0 0 0-.023-.38.664.664 0 0 0-.288-.41 1.505 1.505 0 0 0-.523-.192 4.404 4.404 0 0 0-.69-.068 21.41 21.41 0 0 1-.78-.035 6.883 6.883 0 0 1-.795-.097 2.536 2.536 0 0 1-.74-.254 1.973 1.973 0 0 1-.607-.507c-.177-.218-.313-.502-.407-.852a2.364 2.364 0 0 1-.055-.98c.05-.328.17-.635.362-.92a2.92 2.92 0 0 1 .794-.776 4.032 4.032 0 0 1 1.242-.544 4.102 4.102 0 0 1 1.564-.13c.496.06.933.198 1.31.411l-.248.804zm7.467-.386a2.378 2.378 0 0 0-.292-.671 1.72 1.72 0 0 0-.467-.492 1.507 1.507 0 0 0-.634-.248 1.88 1.88 0 0 0-.784.056c-.551.148-.943.422-1.176.82-.233.4-.315.9-.248 1.5l3.6-.965zm-3.331 2.127c.14.399.306.73.499.997.192.266.407.47.644.614.238.143.497.228.777.255.28.027.575 0 .885-.083.309-.083.566-.19.77-.323.205-.132.38-.264.523-.397.144-.132.27-.251.377-.357a.765.765 0 0 1 .338-.207c.16-.043.294-.015.403.083l.735.548a3.293 3.293 0 0 1-.544.813 4.128 4.128 0 0 1-.716.622 4.657 4.657 0 0 1-.816.446c-.285.121-.567.219-.845.293a4.385 4.385 0 0 1-1.611.138 3.564 3.564 0 0 1-1.454-.48 3.941 3.941 0 0 1-1.183-1.108c-.342-.474-.607-1.059-.793-1.754a4.544 4.544 0 0 1-.146-1.597 3.8 3.8 0 0 1 .42-1.446c.232-.44.557-.827.973-1.16.416-.332.92-.577 1.513-.736.5-.134.982-.177 1.447-.131.465.047.891.182 1.277.407.386.225.725.538 1.017.937.292.4.515.885.668 1.457.077.288.098.491.064.608-.035.117-.14.2-.316.246l-4.906 1.315zm7.827-5.129c.12-.54.314-.99.582-1.352a1.944 1.944 0 0 1 1.096-.73c.366-.097.681-.096.946.004l.259 1.463c-.001.1-.02.175-.06.227a.32.32 0 0 1-.18.11c-.078.022-.196.04-.355.054a2.75 2.75 0 0 0-.455.08 1.656 1.656 0 0 0-.539.245 1.469 1.469 0 0 0-.373.385c-.1.152-.178.323-.235.515-.056.191-.1.405-.13.64l1.308 4.883-1.909.512-2.124-7.929 1.12-.3c.196-.052.342-.054.438-.005.096.048.18.16.255.333l.356.865zm9.521-.754a2.378 2.378 0 0 0-.292-.671 1.72 1.72 0 0 0-.467-.492 1.507 1.507 0 0 0-.634-.248 1.88 1.88 0 0 0-.784.057c-.55.147-.943.42-1.175.82-.233.399-.316.899-.249 1.5l3.601-.966zm-3.33 2.127c.139.399.305.73.498.997.193.266.408.47.645.614.237.143.496.228.777.255.28.027.575 0 .884-.083.31-.083.566-.19.77-.323.206-.132.38-.264.524-.397.144-.132.27-.251.376-.357a.765.765 0 0 1 .338-.207c.16-.043.294-.015.403.083l.735.548a3.293 3.293 0 0 1-.544.813 4.128 4.128 0 0 1-.715.622 4.657 4.657 0 0 1-.816.446c-.286.121-.567.219-.845.293a4.385 4.385 0 0 1-1.612.138 3.564 3.564 0 0 1-1.454-.48 3.941 3.941 0 0 1-1.182-1.108c-.343-.474-.607-1.059-.794-1.754a4.544 4.544 0 0 1-.146-1.597 3.8 3.8 0 0 1 .42-1.446c.233-.44.557-.827.973-1.16.417-.332.92-.577 1.513-.736.5-.134.982-.177 1.448-.131.465.047.89.182 1.277.407.386.225.725.538 1.017.937.292.4.514.885.667 1.457.078.288.099.491.064.608-.035.117-.14.2-.315.246l-4.907 1.315zM104.056 54.95l.487-.13c.196-.053.35-.124.465-.212a.853.853 0 0 0 .263-.348l2.038-4.729c.084-.199.189-.35.313-.452.125-.102.295-.183.511-.24l1.793-.481-2.519 5.653c-.145.342-.32.605-.526.787.187.016.363.061.53.135.165.074.335.185.506.332l5.281 4.192-1.831.491c-.247.066-.44.08-.58.044a.896.896 0 0 1-.387-.224l-4.267-3.28a.857.857 0 0 0-.418-.202c-.144-.022-.337 0-.58.064l-.656.176 1.317 4.915-2.08.557-2.993-11.174 2.079-.557 1.254 4.683zm14.66-5.469l2.125 7.929-1.167.312c-.252.068-.443-.005-.572-.22l-.301-.598c-.237.417-.523.78-.86 1.088-.337.308-.771.534-1.302.676a2.914 2.914 0 0 1-1.206.087 2.38 2.38 0 0 1-1.005-.397 2.82 2.82 0 0 1-.77-.817 4.182 4.182 0 0 1-.5-1.17l-1.35-5.039 1.909-.511 1.35 5.038c.13.484.342.83.637 1.034.295.206.667.248 1.115.128.33-.088.62-.244.869-.469.249-.224.468-.499.656-.826l-1.536-5.733 1.908-.512zm4.055.388c.12-.54.314-.991.582-1.353a1.944 1.944 0 0 1 1.096-.728c.366-.098.681-.097.946.003l.259 1.463c0 .1-.02.175-.06.227a.32.32 0 0 1-.18.11c-.078.021-.196.04-.355.054a2.75 2.75 0 0 0-.455.08 1.656 1.656 0 0 0-.539.245 1.469 1.469 0 0 0-.373.385c-.1.151-.178.323-.235.515-.056.191-.1.405-.13.64l1.308 4.883-1.909.511-2.124-7.928 1.12-.3c.196-.053.342-.054.438-.006.096.05.18.16.255.334l.356.865zm8.847-2.188a.527.527 0 0 1-.116.217.435.435 0 0 1-.203.108.706.706 0 0 1-.318.003c-.12-.024-.257-.049-.413-.076a3.48 3.48 0 0 0-.522-.046 2.356 2.356 0 0 0-.65.091c-.377.1-.65.26-.821.477a.772.772 0 0 0-.153.712c.045.17.139.298.28.384.143.086.317.149.523.187.206.039.435.062.685.07.25.007.507.02.768.038.262.018.523.049.783.092.26.044.503.122.73.235.226.114.425.269.596.466.172.197.3.455.386.774.102.382.128.752.078 1.11a2.36 2.36 0 0 1-.383.997 2.962 2.962 0 0 1-.846.815 4.463 4.463 0 0 1-1.311.562 4.47 4.47 0 0 1-.82.141c-.273.021-.54.02-.804-.004a4.294 4.294 0 0 1-.747-.13 3.34 3.34 0 0 1-.64-.243l.245-.845a.645.645 0 0 1 .147-.254.583.583 0 0 1 .275-.149.639.639 0 0 1 .363.01c.124.04.265.079.425.119.16.04.343.068.549.085.206.016.453-.014.741-.091.227-.061.414-.14.562-.238.148-.097.263-.204.345-.32a.826.826 0 0 0 .15-.367.947.947 0 0 0-.023-.38.664.664 0 0 0-.288-.41 1.505 1.505 0 0 0-.523-.192 4.404 4.404 0 0 0-.69-.068 21.41 21.41 0 0 1-.78-.035 6.883 6.883 0 0 1-.796-.097 2.536 2.536 0 0 1-.738-.254 1.973 1.973 0 0 1-.608-.508c-.177-.217-.313-.501-.407-.852a2.364 2.364 0 0 1-.055-.979c.05-.328.17-.635.362-.92a2.92 2.92 0 0 1 .794-.777 4.032 4.032 0 0 1 1.242-.544 4.102 4.102 0 0 1 1.564-.129c.496.06.933.197 1.31.411l-.248.804zm7.467-.386a2.378 2.378 0 0 0-.292-.671 1.72 1.72 0 0 0-.467-.492 1.507 1.507 0 0 0-.634-.249 1.88 1.88 0 0 0-.784.057c-.551.148-.943.421-1.176.82-.233.4-.315.9-.248 1.5l3.6-.965zm-3.331 2.127c.14.398.306.73.499.996.192.266.407.471.644.615.238.143.497.228.777.255.28.027.575 0 .885-.084.309-.082.566-.19.77-.322.205-.132.38-.265.523-.397.144-.132.27-.252.377-.358a.765.765 0 0 1 .338-.206c.16-.043.294-.015.403.082l.735.549a3.293 3.293 0 0 1-.544.812 4.128 4.128 0 0 1-.716.623 4.657 4.657 0 0 1-.816.446c-.285.12-.567.218-.845.293a4.385 4.385 0 0 1-1.611.138 3.564 3.564 0 0 1-1.454-.48 3.941 3.941 0 0 1-1.183-1.108c-.342-.474-.607-1.059-.793-1.755a4.544 4.544 0 0 1-.146-1.596 3.8 3.8 0 0 1 .42-1.446c.232-.44.557-.827.973-1.16.416-.332.92-.577 1.513-.736.5-.134.982-.178 1.447-.131.465.046.891.182 1.277.407.386.225.725.538 1.017.937.292.4.515.885.668 1.457.077.288.098.49.064.608-.035.117-.14.199-.316.246l-4.906 1.315zm14.86.01l-1.839.493a.52.52 0 0 1-.365-.019 1.057 1.057 0 0 1-.279-.19l-2.416-2.31c-.002.095-.01.186-.022.272-.013.086-.03.168-.054.246l-.869 2.693a1.275 1.275 0 0 1-.143.3.459.459 0 0 1-.28.194l-1.707.458 1.625-4.817-3.641-3.14 1.839-.494a.66.66 0 0 1 .324-.024c.078.02.154.067.229.141l2.37 2.198c.01-.19.043-.384.1-.582l.778-2.445c.062-.22.184-.355.364-.404l1.754-.47-1.598 4.454 3.83 3.446zm2.348-2.832c.286.205.572.327.856.367.284.04.575.02.874-.06.288-.078.534-.202.737-.372.203-.17.356-.388.458-.653.103-.265.153-.578.15-.939a4.96 4.96 0 0 0-.188-1.229 5.487 5.487 0 0 0-.428-1.148 2.357 2.357 0 0 0-.53-.699 1.312 1.312 0 0 0-.625-.305 1.634 1.634 0 0 0-.713.043c-.397.106-.712.28-.945.522a3.181 3.181 0 0 0-.599.918l.953 3.555zm-1.385-4.764c.227-.453.516-.848.867-1.185.352-.337.805-.58 1.362-.73a2.691 2.691 0 0 1 1.259-.047c.406.085.785.263 1.137.536s.666.642.942 1.106c.277.464.502 1.021.676 1.67.158.593.225 1.163.201 1.71a4.17 4.17 0 0 1-.332 1.497 3.27 3.27 0 0 1-.841 1.157 3.236 3.236 0 0 1-1.326.691c-.443.119-.84.152-1.191.1a2.873 2.873 0 0 1-.995-.343l.87 3.246-1.909.511-2.818-10.517 1.167-.312c.247-.067.44.006.58.217l.351.693zm12.606-1.266a2.378 2.378 0 0 0-.291-.671 1.72 1.72 0 0 0-.468-.492 1.507 1.507 0 0 0-.634-.249 1.88 1.88 0 0 0-.784.057c-.55.148-.943.421-1.175.82-.233.4-.316.9-.249 1.5l3.601-.965zm-3.33 2.127c.14.398.305.73.498.996s.408.47.645.614c.237.144.496.23.777.256.28.027.575 0 .884-.084.31-.083.566-.19.77-.322.206-.132.38-.265.524-.397.144-.133.27-.252.376-.358a.765.765 0 0 1 .338-.206c.16-.043.294-.016.403.082l.735.549a3.293 3.293 0 0 1-.544.812 4.128 4.128 0 0 1-.715.623 4.657 4.657 0 0 1-.816.446c-.286.12-.567.218-.845.293a4.385 4.385 0 0 1-1.612.137 3.564 3.564 0 0 1-1.453-.48 3.941 3.941 0 0 1-1.183-1.107c-.343-.474-.607-1.06-.794-1.755a4.544 4.544 0 0 1-.146-1.596 3.8 3.8 0 0 1 .42-1.446c.233-.44.557-.827.973-1.16.417-.332.92-.578 1.513-.736.5-.134.982-.178 1.448-.131.465.046.89.182 1.277.407.386.225.725.537 1.017.937.292.4.514.885.668 1.457.077.288.098.49.063.608-.035.117-.14.199-.315.246l-4.907 1.315zm7.826-5.13c.12-.54.315-.99.582-1.352a1.944 1.944 0 0 1 1.097-.728c.366-.098.68-.097.945.003l.26 1.463c-.001.1-.021.175-.06.227a.32.32 0 0 1-.181.11c-.078.021-.196.04-.354.054a2.75 2.75 0 0 0-.455.08 1.656 1.656 0 0 0-.54.244 1.469 1.469 0 0 0-.372.386c-.1.151-.179.323-.235.514-.056.192-.1.405-.131.64l1.308 4.884-1.908.511-2.125-7.928 1.12-.3c.197-.053.343-.055.438-.006.096.05.181.16.255.334l.356.865zm8.396 4.907c-.69.185-1.271.132-1.744-.158-.472-.29-.8-.778-.984-1.463l-1.187-4.428-.811.218a.385.385 0 0 1-.29-.03c-.09-.048-.153-.139-.189-.273l-.202-.757 1.219-.55-.178-2.272a.439.439 0 0 1 .082-.279.452.452 0 0 1 .256-.16l.989-.264.669 2.496 2.117-.568.364 1.36-2.117.568 1.151 4.296c.067.248.179.424.337.531a.648.648 0 0 0 .555.075.93.93 0 0 0 .286-.122c.072-.05.134-.098.184-.145.051-.047.096-.09.135-.131a.274.274 0 0 1 .128-.08.226.226 0 0 1 .15.005c.044.02.094.051.15.097l.82.774a2.991 2.991 0 0 1-.817.782 3.692 3.692 0 0 1-1.073.478zm6.875-7.2a2.378 2.378 0 0 0-.292-.672 1.72 1.72 0 0 0-.467-.492 1.507 1.507 0 0 0-.634-.248 1.88 1.88 0 0 0-.784.057c-.551.147-.943.42-1.176.82-.232.4-.315.899-.248 1.5l3.601-.966zM180.62 37.4c.14.399.306.731.499.997s.408.47.645.614c.237.143.496.229.776.256.28.027.576-.001.885-.084.309-.083.566-.19.77-.323.205-.132.38-.264.524-.397.144-.132.27-.251.376-.357a.765.765 0 0 1 .338-.207c.16-.042.294-.015.403.083l.735.548a3.293 3.293 0 0 1-.544.813 4.128 4.128 0 0 1-.715.622 4.657 4.657 0 0 1-.817.447c-.285.12-.566.218-.845.292a4.385 4.385 0 0 1-1.61.138 3.564 3.564 0 0 1-1.455-.48 3.941 3.941 0 0 1-1.183-1.108c-.342-.474-.606-1.059-.793-1.754a4.544 4.544 0 0 1-.146-1.597 3.8 3.8 0 0 1 .42-1.446c.233-.44.557-.827.973-1.16.416-.331.92-.577 1.513-.736.5-.134.982-.177 1.447-.13.466.046.891.182 1.277.407.386.225.725.537 1.017.936.292.4.515.885.668 1.457.078.289.099.491.064.608-.035.117-.14.2-.315.246l-4.907 1.315zm7.704-5.526c.117-.203.246-.396.387-.58a3.273 3.273 0 0 1 1.048-.894c.213-.115.453-.208.72-.28a2.943 2.943 0 0 1 1.211-.088c.374.057.709.188 1.004.393.295.206.55.477.765.814.214.337.381.728.5 1.17l1.352 5.047-1.909.511-1.352-5.046c-.13-.484-.34-.83-.633-1.035-.293-.206-.666-.248-1.12-.127-.33.088-.618.246-.867.473a3.44 3.44 0 0 0-.655.83l1.536 5.733-1.908.512-2.125-7.929 1.167-.312c.247-.067.44.006.58.217l.3.59z"/>
</g>
</svg>


OK, I didn't find a programatic solution to the problem. However, I let our designer know about the problem, so she took a look and - as she put it - she "just flattened it again in Illustrator".
So if anyone has an issue with an SVG with text in paths, only in Safari, I suppose that's what you should ask your designer to do.
Note: The new SVG worked as a background-image. I didn't check the <img> version.


Did the SVG work for standalone?
The SVG you refer to has a fill set to white on the containing group. When I tried to open it in chrome or safari I couldn't see it but it was there, I validated by changing the group tag to
Either way, text in SVG can be problematic if the font isn't available so flattening to paths can be a good solution

Related

SVG floating out it's Anchor container

How can I fix the <a> and make it contain all the SVG icon.
and also plz plz, How to remove the underline area of the <a> element??
photo for illustration
a {
background-color: rgba(42, 165, 42, 0.596);
text-decoration: none;
display: inline-block;
}
svg {
background-color: rgba(165, 42, 42, 0.596);
height: 50px
}
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28">
<path
d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"
/>
</svg>
</a>

The SVG icon is 50px X 50px, but since the a is usually a inline element it gives some extra space,
Just like a text which is an inline element, that gives space up, and down
This causes the browser to think that ,svg which is inside a is an inline element, and gives space.
To perfectly make the a element's width and height equal to svg
Add display: inline-flex to parent's(a) css
Add display: inline-table to child's(svg) css
Example snippet
a {
background-color: rgba(42, 165, 42, 0.596);
text-decoration: none;
display: inline-flex;
}
svg {
background-color: rgba(165, 42, 42, 0.596);
height: 50px;
display: inline-table;
}
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28">
<path
d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"
/>
</svg>
</a>

How to Change The Origin Point of The Container to an Element Inside It

So, what I want to do is to center the nav element in a way where the Instagram logo is the nav is orgin point, which will make the nav element shifted to the left abit making the Instagram logo appear in he center and the other elements is relative to it.
nav {
background-color: rgba(165, 42, 42, 0.521);
display: flex;
align-items: center;
justify-content: center;
}
a {
background-color: rgba(238, 223, 20, 0.596);
margin: 10px;
}
<nav>
home
contact
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28" height="50" width="50">
<path d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"/>
</svg>
</a>
about
</nav>

I would use grid for this:
nav {
background-color: rgb(165 42 42 / 0.521);
display: grid;
grid-template-columns: 1fr 1fr min-content 2fr;
/*
I want four columns, with the third taking up the minimum space needed to fit its content.
The remaining space is divided into 4 portions.
Have two columns on the left taking up one portion each
Have one column on the right taking up two portions
*/
}
a {
display: grid;
place-content: center;
margin: 10px;
background-color: rgb(238 223 20 / 0.596);
}
<nav>
home
contact
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.28 16.28" height="50" width="50">
<path d="M8.14 3.96a4.17 4.17 0 0 0-4.17 4.17 4.16 4.16 0 0 0 4.17 4.17 4.17 4.17 0 0 0 4.17-4.17A4.17 4.17 0 0 0 8.2 3.96zm0 6.88a2.71 2.71 0 1 1 0-5.42 2.71 2.71 0 0 1 2.71 2.71 2.72 2.72 0 0 1-2.71 2.72zm5.32-7a1 1 0 0 1-1.707.707 1 1 0 0 1 .707-1.707 1 1 0 0 1 1 1zm2.76 1a4.83 4.83 0 0 0-1.32-3.4A4.84 4.84 0 0 0 11.49.12a107.23 107.23 0 0 0-6.71 0 4.87 4.87 0 0 0-3.41 1.31A4.86 4.86 0 0 0 .05 4.84a107.55 107.55 0 0 0 0 6.72 4.86 4.86 0 0 0 1.32 3.41 4.79 4.79 0 0 0 3.41 1.23c1.34.08 5.37.08 6.71 0a4.79 4.79 0 0 0 3.41-1.3 4.86 4.86 0 0 0 1.3-3.41c.08-1.34.08-5.37 0-6.71zM14.48 13a2.76 2.76 0 0 1-1.54 1.55c-1.07.42-3.62.32-4.8.32s-3.73.1-4.8-.32A2.75 2.75 0 0 1 1.79 13c-.43-1.07-.33-3.62-.33-4.8s-.09-3.73.33-4.8a2.73 2.73 0 0 1 1.55-1.54c1.07-.43 3.61-.33 4.8-.33s3.73-.1 4.8.32a2.75 2.75 0 0 1 1.55 1.55c.42 1.07.32 3.62.32 4.8s.1 3.73-.33 4.8z"/>
</svg>
</a>
about
</nav>

My SVG source code is not working in html <code> tags

I need to add my embaded SVG source code to one of my websites. Example below,
This way user can copy the original svg code of my icons. I've tried to add it but it didn't appear as in the picture rather it gave me the icon instead -
This is the code I have tired
<pre ><code class="language-html" data-lang="html">
<svg xmlns="http://www.w3.org/2000/svg" width="5rem" height="5rem" fill="none"><defs/><g filter="url(#filter0_ddd)"><rect width="38" height="40" x="8" y="4" fill="#fff" rx="5"/></g><g filter="url(#filter1_ddd)"><path fill="#78A0FF" d="M14 11.2c0-1.21503.985-2.2 2.2-2.2h22.6c1.215 0 2.2.98497 2.2 2.2v2.6c0 1.215-.985 2.2-2.2 2.2H16.2c-1.215 0-2.2-.985-2.2-2.2v-2.6z"/></g><g filter="url(#filter2_ddd)"><path fill="#78A0FF" d="M14 22.2c0-1.215.985-2.2 2.2-2.2h22.6c1.215 0 2.2.985 2.2 2.2v14.6c0 1.215-.985 2.2-2.2 2.2H16.2c-1.215 0-2.2-.985-2.2-2.2V22.2z"/></g><defs><filter id="filter0_ddd" width="54" height="56" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation=".5"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.992157 0 0 0 0 0.976471 0 0 0 0.12 0"/><feBlend in2="effect1_dropShadow" result="effect2_dropShadow"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="4"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.992157 0 0 0 0 0.976471 0 0 0 0.18 0"/><feBlend in2="effect2_dropShadow" result="effect3_dropShadow"/><feBlend in="SourceGraphic" in2="effect3_dropShadow" result="shape"/></filter><filter id="filter1_ddd" width="43" height="23" x="6" y="5" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation=".5"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="1"/><feColorMatrix values="0 0 0 0 0.470833 0 0 0 0 0.626471 0 0 0 0 1 0 0 0 0.12 0"/><feBlend in2="effect1_dropShadow" result="effect2_dropShadow"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="4"/><feColorMatrix values="0 0 0 0 0.470833 0 0 0 0 0.626471 0 0 0 0 1 0 0 0 0.18 0"/><feBlend in2="effect2_dropShadow" result="effect3_dropShadow"/><feBlend in="SourceGraphic" in2="effect3_dropShadow" result="shape"/></filter><filter id="filter2_ddd" width="43" height="35" x="6" y="16" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation=".5"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="1"/><feColorMatrix values="0 0 0 0 0.470833 0 0 0 0 0.626471 0 0 0 0 1 0 0 0 0.12 0"/><feBlend in2="effect1_dropShadow" result="effect2_dropShadow"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="4"/><feGaussianBlur stdDeviation="4"/><feColorMatrix values="0 0 0 0 0.470833 0 0 0 0 0.626471 0 0 0 0 1 0 0 0 0.18 0"/><feBlend in2="effect2_dropShadow" result="effect3_dropShadow"/><feBlend in="SourceGraphic" in2="effect3_dropShadow" result="shape"/></filter></defs></svg>
</code></pre>
So, I've fetched the bootstrap SVG's source code to see how they have done it. And I've found their SVG source code is different than mine. Maybe somehow, they have converted it to show the SVG code in the website.
<pre class="chroma"><code class="language-html" data-lang="html"><span class="p"><</span><span class="nt">svg</span> <span class="na">width</span><span class="o">=</span><span class="s">"1em"</span> <span class="na">height</span><span class="o">=</span><span class="s">"1em"</span> <span class="na">viewBox</span><span class="o">=</span><span class="s">"0 0 16 16"</span> <span class="na">class</span><span class="o">=</span><span class="s">"bi bi-bell"</span> <span class="na">fill</span><span class="o">=</span><span class="s">"currentColor"</span> <span class="na">xmlns</span><span class="o">=</span><span class="s">"http://www.w3.org/2000/svg"</span><span class="p">></span>
<span class="p"><</span><span class="nt">path</span> <span class="na">d</span><span class="o">=</span><span class="s">"M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2z"</span><span class="p">/></span>
<span class="p"><</span><span class="nt">path</span> <span class="na">fill-rule</span><span class="o">=</span><span class="s">"evenodd"</span> <span class="na">d</span><span class="o">=</span><span class="s">"M8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z"</span><span class="p">/></span>
<span class="p"></</span><span class="nt">svg</span><span class="p">></span></code></pre>
You would notice they are using span tags a lot. May I know How I can convert my SVG code to something similar like bootstraps SVG source code to show it in my website as the first sample.

Few lines of javascript is required in order to make the copy to clipboard button workable
Also I have replace your pre tag with xmp you can use still use pre tag no limit here and a little bit of css is required to have overflow property with the div tag.
In xmp tag you can place your svg code and then you can this javascript code so the user of your website can copy the code of your svg
function CopyToClipboard(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.select().createTextRange();
document.execCommand("copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("copy");
}
}
xmp {
border: 2px solid black;
overflow-x: scroll;
}
<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>
<div id="div1">
<xmp><svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-bell" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2z" />
<path fill-rule="evenodd"
d="M8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
</svg>
</xmp>
</div>

Display dropdown menu on link hover

.drop_down_menu a{
text-decoration: none;
display: block;
color: pink;
}
.dropdown{
position: absolute;
margin-left: 10px;
border: 100px
text-decoration: none;
font-family: Courier New;
display: none;
}
.hover_animation:hover .dropdown{
display: block;
}
<!-- This is the HTML for dropdowm-->
<div class="drop_down_menu">
<div class="hover_animation">
<svg class="drop_down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
</svg>
<svg class="drop_down_fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path class="hvr"fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
</svg>
</div>
<div class="dropdown">
My Posts
Liked Posts
Trending Posts
Following
Contact
</div>
</div>
I have tried doing display block everything that I have tried is not working. I have tried creating multiple divs and classes to specify on what i hover that it displays. What do i need to do differently to get it to work?

Use a sibling selector.
As you described, you want the menu to show when another element is hovered. The way you originally wrote your CSS would have targeted a menu element that was inside the hovered trigger element:
/* targets this HTML structure:
<div class="hover_animation">
<div class="dropdown"></div>
</div>
*/
.hover_animation:hover .dropdown {
What you need is a rule to target a menu element that follows the hovered trigger element:
/* targets this HTML structure:
<div class="hover_animation"></div>
<div class="dropdown"></div>
*/
.hover_animation:hover ~ .dropdown {
Here's a working example:
.dropdown {
background-color: #0f0;
color: #fff;
display: none;
padding: 20px;
}
.hover_animation {
background-color: #eee;
color: #00f;
cursor: pointer;
height: 40px;
padding: 10px;
width: 40px;
}
.hover_animation:hover {
background-color: #00f;
color: #eee;
}
.hover_animation:hover ~ .dropdown {
display: block;
}
<div class="hover_animation">Hover me!</div>
<div class="dropdown">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>

Edit: Got it to work with CSS, you just need to hover the first div since that is the first element that css detects when hovering.
/* This is for the dropdown menu */
.drop_down_menu a {
text-decoration: none;
display: block;
color: pink;
}
.dropdown {
position: absolute;
margin-left: 10px;
border: 100px text-decoration: none;
font-family: Courier New;
display: none;
}
.drop_down_menu:hover .dropdown {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- This is the HTML for dropdowm-->
<div class="drop_down_menu">
<div class="hover_animation">
<svg class="drop_down" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
</svg>
<svg class="drop_down_fill" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path class="hvr"fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
</svg>
</div>
<div class="dropdown">
My Posts
Liked Posts
Trending Posts
Following
Contact
</div>
</div>

how to use pandas to draw many picture

there are many lines in the excel，i want to draw a picture for every line, but there are too many lines,if i show them in one picture(using the subplots=True), every one becomes very small(just like the picture in the attachment).
i want to how to draw many picture, not like the subplot.
below are my data in excel
2017/2/13 2017/2/14 2017/2/15 2017/2/16 2017/2/17
sds_24g_4x1g 75 0 0 0 0
hsb_stk() 0 0 0 0 0
nic_rx_cluster 0 0 0 0 0
sds_16g_8x2p5g 80 0 0 0 0
sds_20g_4x2p5g 80 0 0 0 0
sds_8g_12x2p5g 81 0 0 0 0
nic_rx_truncate 0 0 0 0 0
sds_24g_4x10g 82 0 0 0 0
sds_8x10g 83 0 0 0 0
opri_rmk_cpuas 0 0 0 0 0
cfi_rmk_vlan 0 0 0 0 0
ipri_rmk_cpuas 0 0 0 0 0
cfi_rmk_cpuas 0 0 0 0 0
sds_16x2p5g 83 0 0 0 0
dei_rmk_cpuas 100 0 0 0 0
sds_24x2p5g 84 0 0 0 0
opri_rmk_mix 0 0 0 0 0
ipri_rmk_mix 0 0 0 0 0
dei_rmk_table 0 0 0 0 0
cfi_rmk_table 0 0 0 0 0
chip_pll_fcov 0 0 0 0 0
sds_24fe_4x1g 91 0 0 0 0
cov_vlan 0 0 0 0 0
cov_l2 0 0 0 0 0
pwr_saving 0 0 0 0 0
cov_trunk 0 0 0 0 0
dscp_rmk_mix 0 0 0 0 0
cov_qid 0 0 0 0 0
cov_led_scan 93 0 0 0 0