lundi 1 juillet 2019

Why is my SVG path getting messed up when I zoom in?

Here is what is happening: enter image description here

What it should look like (and does look like when zoomed out): enter image description here

Here is my code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.3, 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 589 113" style="enable-background:new 0 0 589 113;" xml:space="preserve">
<style type="text/css">
    .st0{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
    .st1{fill:#FFFFFF;}
    .st2{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:0.25;}
</style>
<g>
    <g>
        <defs>
            <rect id="SVGID_1_" y="0" width="163.22" height="110.72"/>
        </defs>
        <clipPath id="SVGID_2_">
            <use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
        </clipPath>
        <path class="st0" d="M68.94,0C17.4,0,0,34.64,0,34.64s20.02-17.23,42.1-17.23c35.86-0.01,96.47,0,96.47,0L163.22,0
            C163.22,0,109.27,0,68.94,0"/>
    </g>
    <path class="st1" d="M131.1,23.29l-17.4,14.52H63.25c0,0,60.9,15.88,5.32,72.92c0,0,20.68-42.42-5.43-52.44
        c0,0-24.24-8.98-22.68-34.99H131.1"/>
</g>
<g>
    <path class="st2" d="M179.14,25.34V0.25h21.3v4.38h-16.95v20.71H179.14z M186.7,14.95v-3.83h12.7v3.83H186.7z"/>
    <path class="st2" d="M203.65,25.34V0.25h4.38v20.71h16.88v4.38H203.65z"/>
    <path class="st2" d="M228.22,25.34V0.25h22.4v4.38h-18.05v16.33h18.09v4.38H228.22z M235.78,14.43v-3.69h13.91v3.69H235.78z"/>
    <path class="st2" d="M279.83,25.34L269.3,15.09l-10.42,10.25h-5.7l13.46-13.05l-12.5-12.05h6.04l9.56,9.29l9.42-9.29h5.7
        l-12.5,12.05l13.6,13.05H279.83z"/>
    <path class="st2" d="M315.45,25.34l-3.76-6.32h-11.88l2.07-3.56h7.7l-5.59-9.39L292.6,25.34h-5.01l14.43-24.03
        c0.52-0.86,1.17-1.42,2.14-1.42c0.97,0,1.59,0.55,2.11,1.42l14.46,24.03H315.45z"/>
    <path class="st2" d="M331.71,25.34c-7.01,0-12.19-5.52-12.19-12.81c0-7.39,5.18-12.29,12.19-12.29h13.6v4.38h-13.6
        c-4.49,0-7.8,3.35-7.8,8.11c0,4.73,3.28,8.22,7.8,8.22h10.74v-6.52h-11.32v-3.69h15.74v14.6H331.71z"/>
    <path class="st2" d="M362.53,25.34c-7.01,0-12.19-5.52-12.19-12.81c0-7.39,5.18-12.29,12.19-12.29h6.11
        c7.25,0,12.29,5.01,12.29,12.29c0,7.28-5.14,12.81-12.29,12.81H362.53z M368.64,20.96c4.63,0,7.9-3.49,7.9-8.22
        s-3.28-8.11-7.9-8.11h-6.11c-4.49,0-7.8,3.35-7.8,8.11c0,4.73,3.28,8.22,7.8,8.22H368.64z"/>
    <path class="st2" d="M388.73,6.98v18.37h-4.18V2.56c0-1.62,0.86-2.62,2.24-2.62c0.66,0,1.21,0.24,1.86,0.9l17.71,17.57V0.04h4.18
        v22.99c0,1.66-0.9,2.62-2.17,2.62c-0.73,0-1.38-0.31-2-0.93L388.73,6.98z"/>
</g>
<g>
    <path class="st1" d="M229.21,107.29v3.94h-50.32V37.15h49.8v3.94h-45.24v29.68h42.54v3.94h-42.54v32.58H229.21z"/>
    <path class="st1" d="M268.53,107.29h0.21l25.63-70.14h4.57l-27.7,74.08h-5.29l-27.6-74.08h4.77L268.53,107.29z"/>
    <path class="st1" d="M363.67,107.29v3.94h-50.32V37.15h49.8v3.94h-45.24v29.68h42.54v3.94h-42.54v32.58H363.67z"/>
    <path class="st1" d="M380.79,37.15h5.71l46.8,67.96h0.21V37.15h4.57v74.08h-5.4l-47.11-68.48h-0.21v68.48h-4.57V37.15z"/>
    <path class="st1" d="M452.48,41.09v-3.94h56.76v3.94h-26.15v70.14h-4.57V41.09H452.48z"/>
    <path class="st1" d="M572,58.32c-0.52-12.66-10.06-18.99-23.76-18.99c-8.4,0-20.34,3.53-20.34,15.77c0,11.93,12.66,13.9,25.21,16.5
        c12.66,2.59,25.32,5.81,25.32,20.54c0,15.36-14.73,20.86-26.04,20.86c-17.33,0-31.44-7.16-31.23-26.25h4.57
        c-0.93,16.19,12.04,22.31,26.67,22.31c8.92,0,21.48-4.05,21.48-16.91c0-12.55-12.66-14.73-25.32-17.33
        c-12.56-2.59-25.21-5.6-25.21-19.71c0-14.22,13.18-19.71,24.9-19.71c15.46,0,27.6,6.64,28.33,22.93H572z"/>
</g>
</svg>

As you can see, when zoomed in at certain points you see this weird thing happening at the bottom of the "F". I don't understand why this is happening. I made my SVG and exported it directly from Illustrator.




Aucun commentaire:

Enregistrer un commentaire