1

Can someone please explain why some SVGs look so different when opened in Inkscape?

I've used Inkscape for a while and I am able to open and edit pretty much any SVGs, but some appear with strange artefacts and I would like to know how to resolve this. Here's an example using the logo from this website.

When I view it in my browser or with an image viewer, it's completely normal like this:

properly rendered SVG logo

However when I open it in Inkscape, it looks like this:

improperly rendered SVG logo

I am unable to work with this file in Inkscape and I cannot understand why. Any ideas? Checking the file with a text editor, it looks like a completely ordinary SVG.

<svg id="JER_LOGO_HZ_WT" data-name="JER LOGO_HZ_WT" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 882.26 283.46" height="283" width="882">
  <defs>
    <style>
      .cls-1 {
        fill: url("#linear-gradient");
      }
      .cls-2 {
        fill: url("#linear-gradient-2");
      }
      .cls-3 {
        fill: url("#linear-gradient-3");
      }
      .cls-4 {
        fill: #fff;
      }
    </style>
    <linearGradient id="linear-gradient" x1="54.57" y1="274.4" x2="166.2" y2="64.46" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.16" stop-color="#fff"/><stop offset="0.23" stop-color="#fff" stop-opacity="0.97"/><stop offset="0.34" stop-color="#fff" stop-opacity="0.9"/><stop offset="0.47" stop-color="#fff" stop-opacity="0.77"/><stop offset="0.61" stop-color="#fff" stop-opacity="0.6"/><stop offset="0.77" stop-color="#fff" stop-opacity="0.37"/><stop offset="0.94" stop-color="#fff" stop-opacity="0.11"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient>
    <linearGradient id="linear-gradient-2" x1="196.96" y1="136.17" x2="42.04" y2="108.85" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0.38" stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0.2"/></linearGradient>
    <linearGradient id="linear-gradient-3" x1="36.08" y1="24.27" x2="168.99" y2="24.27" gradientUnits="userSpaceOnUse"><stop offset="0.11" stop-color="#fff"/><stop offset="0.18" stop-color="#fff" stop-opacity="0.96"/><stop offset="0.31" stop-color="#fff" stop-opacity="0.84"/><stop offset="0.49" stop-color="#fff" stop-opacity="0.64"/><stop offset="0.7" stop-color="#fff" stop-opacity="0.38"/><stop offset="0.93" stop-color="#fff" stop-opacity="0.04"/><stop offset="0.96" stop-color="#fff" stop-opacity="0"/></linearGradient>
  </defs>
  <title>jersey-logo-white</title><path
    class="cls-1"
    d="M95.22,283.47a94.27,94.27,0,0,1-66.91-27.75A95.75,95.75,0,0,1,0,188.65a14.11,14.11,0,1,1,28.21-.34,68,68,0,0,0,45.05,63.18,65.66,65.66,0,0,0,22,3.77c36.76,0,66.67-30.46,66.67-67.89V85.65a14.11,14.11,0,1,1,28.22,0V187.36C190.11,240.35,147.54,283.47,95.22,283.47Z"/><path
    class="cls-2"
    d="M140,97.61c0-47.76,34.46-73.2,66.77-73.2a12.46,12.46,0,0,0,11.86-12.35A12.16,12.16,0,0,0,206.31,0c-20.8,0-38.3,6-52.38,15.62-27.71,19-42.12,52.34-42.12,82.73V184.5c0,23.55-18.78,42.71-41.86,42.71-21.94,0-40.29-17.47-41.77-39.77,0,0,0,.42,0,0.87a68.1,68.1,0,0,0,34.61,58.43,65.94,65.94,0,0,0,20.39,7.42C115.53,247.84,140,219,140,184.5V97.61Z"/><path class="cls-3" d="M169,7.35a144.69,144.69,0,0,1-53.18,10.06,144.49,144.49,0,0,1-60-12.95A14,14,0,0,0,44.28,29.89,172.2,172.2,0,0,0,115.8,45.32h0c3.61,0,7.28-.13,10.86-0.35a98.09,98.09,0,0,1,10.22-14.12A88.53,88.53,0,0,1,169,7.35Z"/><path
    class="cls-4"
    d="M375,178.15c0-29.26,21.73-52.87,52.23-52.87,27.38,0,50.58,18.81,50.58,57a4.68,4.68,0,0,1-4.64,4.62H402.81c1.89,12.34,11.91,22.57,29,22.57a44.89,44.89,0,0,0,23.24-7,4.63,4.63,0,0,1,6.35,1.38c0.84,1.25,4.43,6.35,6.73,9.93A4.77,4.77,0,0,1,467.1,220c-10.12,7.22-24.17,11.19-38.17,11.19C398.21,231.21,375,210.53,375,178.15ZM427.26,147c-16.51,0-23.62,11.5-24.64,21.52h49.72C451.5,158.93,444.82,147,427.26,147Z"/><path
    class="cls-4"
    d="M666.63,178.15c0-29.26,21.73-52.87,52.23-52.87,27.38,0,50.58,18.81,50.58,57a4.68,4.68,0,0,1-4.64,4.62H694.41c1.88,12.34,11.91,22.57,29,22.57a44.92,44.92,0,0,0,23.25-7,4.63,4.63,0,0,1,6.35,1.38c0.85,1.25,4.43,6.35,6.73,9.93A4.76,4.76,0,0,1,758.7,220c-10.11,7.22-24.17,11.19-38.16,11.19C689.82,231.21,666.63,210.53,666.63,178.15ZM718.86,147c-16.51,0-23.62,11.5-24.65,21.52h49.72C743.11,158.93,736.43,147,718.86,147Z"/><path
    class="cls-4"
    d="M495.29,224.09V132.43a4.71,4.71,0,0,1,4.63-4.64h17.29a4.67,4.67,0,0,1,4.62,4.64v8.93c6.26-7.5,16.21-13.89,26.8-15.65A4.73,4.73,0,0,1,554,130.3V146a4.66,4.66,0,0,1-4.63,4.63c-10.59-.85-23.31,6.47-27.56,16.88v56.59a4.7,4.7,0,0,1-4.62,4.63H499.92A4.66,4.66,0,0,1,495.29,224.09Z"/><path
    class="cls-4"
    d="M565.63,212l6.72-11.24a4.59,4.59,0,0,1,6.56-1.21c8.08,5.84,20.35,10.8,31,10.8,11.48,0,16.93-4.39,16.93-10.65,0-16.52-59.78-2.93-59.78-42.63,0-16.92,14.65-31.76,41.38-31.76a64.6,64.6,0,0,1,37.3,11.38,4.66,4.66,0,0,1,1.2,6c-0.9,1.58-3.61,6.52-5.84,10.3a4.65,4.65,0,0,1-6.55,1.62,45.25,45.25,0,0,0-26.1-8.41c-9.61,0-15.89,4.17-15.89,9.82,0,14.83,60,2.3,60,43,0,18.6-15.88,32.17-43.87,32.17-16,0-31.38-4.82-42.06-13.07A4.64,4.64,0,0,1,565.63,212Z"/><path
    class="cls-4"
    d="M855.72,132.43c0,18,0,47.69,0,53.41,0,8.86-7.66,17.89-21.38,17.89-13.39,0-20.55-10.33-20.55-17.89V132.44a4.66,4.66,0,0,0-4.63-4.64H791.86a4.71,4.71,0,0,0-4.62,4.64c0,10.87,0,56.06,0,56.06,0,24.36,22,40.71,46.71,40.22,14.14-.27,18.65-4.71,21.78-6.74,0,15.28-7.71,23.15-16.42,25.28-10.33,2.54-23.51,3-37.57-7.27a4.76,4.76,0,0,0-6.52,1.09c-2.27,3.64-4.64,7.17-6.79,10.92-1.51,2.63-.74,5,1.05,6.36,20.51,15.19,43.24,12.58,54.63,10.43,22.64-4.27,38.16-24.63,38.16-43.94V132.44a4.66,4.66,0,0,0-4.64-4.64H860.34a4.7,4.7,0,0,0-4.62,4.64"/><path
    class="cls-4"
    d="M359.51,100.58a4.65,4.65,0,0,0-4.63-4.64h-18.4a4.7,4.7,0,0,0-4.62,4.64v82c0,11.9-9.22,22.74-23.23,22.74-5.64,0-15.39-2.53-20.84-10.94a4.62,4.62,0,0,0-5.9-1.71c-1.8.84-10.24,4.62-15.39,7-2.74,1.24-2.85,4.82-2,6.32,4.52,7.63,16.53,23.9,44,23.9,33.89,0,51-21.43,51-53.8V100.58Z"/></svg>
  • be sure you save the logo by downloading it at first and then open it from Inkscape. It seems to open perfectly. If you copy and paste it from the browser you can get anything. – user287001 Nov 23 '18 at 16:19
  • That's what I tried, I download the SVG using a browser and open it in Inkscape. And it looks totally different. This also happens with the occasional SVG that I receive by email. I believe the only thing in common is that they are created with Sketch (though not all Sketch exports do this). – Tom Brossman Nov 23 '18 at 17:01
  • I used Inkscape 0.92.2 portable. – user287001 Nov 23 '18 at 17:31
  • 1
    The downloaded SVG file looks completely normal if opened in Inkscape 0.92.3. Maybe you want to update? – Moini Nov 23 '18 at 20:50
2

As the user @Moini comment, updating to the last Inkscape version the svg logo looks normal. This answer is for old versions issues.


Opening and saving the SVG from Illustrator, the problem disappear (I fill them with a flat color to show better the differences):

Comparison

I made a test using just the J that is not seen in Inkscape:

Wrong J

Open it in Illustrator it has a duplicated point:

Dup

Deleting this point the problem is solved:

J fixed

It seems that old Inkscape versions doesn't solve the issue of open or duplicated points, but Illustrator does. This is the svg saved from Illustrator that works correctly in Inkscape:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="JER_LOGO_HZ_WT" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px" viewBox="0 0 882 283" style="enable-background:new 0 0 882 283;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:url(#SVGID_2_);}
.st2{fill:url(#SVGID_3_);}
.st3{fill:#FFFFFF;}
</style>
<title>jersey-logo-white</title>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="54.1044" y1="9.5316" x2="165.7507" y2="219.5023" gradientTransform="matrix(0.9984 0 0 -0.9984 0.9769 283.445)">
<stop  offset="0" style="stop-color:#FFFFFF"/>
<stop  offset="0.16" style="stop-color:#FFFFFF"/>
<stop  offset="0.23" style="stop-color:#FFFFFF;stop-opacity:0.97"/>
<stop  offset="0.34" style="stop-color:#FFFFFF;stop-opacity:0.9"/>
<stop  offset="0.47" style="stop-color:#FFFFFF;stop-opacity:0.77"/>
<stop  offset="0.61" style="stop-color:#FFFFFF;stop-opacity:0.6"/>
<stop  offset="0.77" style="stop-color:#FFFFFF;stop-opacity:0.37"/>
<stop  offset="0.94" style="stop-color:#FFFFFF;stop-opacity:0.11"/>
<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<path class="st0" d="M95.7,283c-25.1,0-49.1-9.9-66.8-27.7c-17.9-17.7-28-41.8-28.3-67c-0.3-7.8,5.8-14.3,13.6-14.6
c7.8-0.3,14.3,5.8,14.6,13.6c0,0.2,0,0.4,0,0.7c0.3,28.4,18.3,53.5,45,63.1c7.1,2.5,14.5,3.8,22,3.8c36.7,0,66.6-30.4,66.6-67.8
V85.5c0-7.8,6.3-14.1,14.1-14.1s14.1,6.3,14.1,14.1v101.5C190.4,240,147.9,283,95.7,283z"/>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="196.5288" y1="147.7342" x2="41.6461" y2="175.0476" gradientTransform="matrix(0.9984 0 0 -0.9984 0.9769 283.445)">
<stop  offset="0" style="stop-color:#FFFFFF"/>
<stop  offset="0.38" style="stop-color:#FFFFFF"/>
<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0.2"/>
</linearGradient>
<path class="st1" d="M140.4,97.5c0-47.7,34.4-73.1,66.7-73.1c6.6-0.3,11.8-5.7,11.8-12.3c-0.1-6.7-5.5-12.1-12.2-12c0,0,0,0-0.1,0
c-20.8,0-38.2,6-52.3,15.6c-27.7,19-42.1,52.3-42.1,82.6v86c0,23.5-18.7,42.6-41.8,42.6c-21.9,0-40.2-17.4-41.7-39.7
c0,0,0,0.4,0,0.9c0.3,24.2,13.5,46.4,34.6,58.3c6.3,3.6,13.2,6.1,20.4,7.4c32.3-6.3,56.7-35.1,56.7-69.5V97.5z"/>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="35.6883" y1="259.4497" x2="168.5983" y2="259.4497" gradientTransform="matrix(0.9984 0 0 -0.9984 0.9769 283.445)">
<stop  offset="0.11" style="stop-color:#FFFFFF"/>
<stop  offset="0.18" style="stop-color:#FFFFFF;stop-opacity:0.96"/>
<stop  offset="0.31" style="stop-color:#FFFFFF;stop-opacity:0.84"/>
<stop  offset="0.49" style="stop-color:#FFFFFF;stop-opacity:0.64"/>
<stop  offset="0.7" style="stop-color:#FFFFFF;stop-opacity:0.38"/>
<stop  offset="0.93" style="stop-color:#FFFFFF;stop-opacity:4.000000e-02"/>
<stop  offset="0.96" style="stop-color:#FFFFFF;stop-opacity:0"/>
</linearGradient>
<path class="st2" d="M169.3,7.3c-16.9,6.7-34.9,10.1-53.1,10c-20.7,0-41.1-4.4-59.9-12.9c-7.2-2.7-15.3,1-17.9,8.3
c-2.4,6.5,0.3,13.8,6.4,17.1C67.2,40,91.6,45.3,116.2,45.2l0,0c3.6,0,7.3-0.1,10.8-0.3c3-5,6.4-9.7,10.2-14.1
C146,20.6,157,12.6,169.3,7.3z"/>
<path class="st3" d="M375,177.9c0-29.2,21.7-52.8,52.1-52.8c27.3,0,50.5,18.8,50.5,56.9c0,2.5-2.1,4.6-4.6,4.6h-70.2
c1.9,12.3,11.9,22.5,29,22.5c8.2-0.2,16.3-2.6,23.2-7c2.1-1.3,5-0.7,6.3,1.4c0.8,1.2,4.4,6.3,6.7,9.9c1.3,2,0.8,4.7-1,6.2
c-10.1,7.2-24.1,11.2-38.1,11.2C398.1,230.8,375,210.2,375,177.9z M427.2,146.8c-16.5,0-23.6,11.5-24.6,21.5h49.6
C451.4,158.7,444.7,146.8,427.2,146.8z"/>
<path class="st3" d="M666.1,177.9c0-29.2,21.7-52.8,52.1-52.8c27.3,0,50.5,18.8,50.5,56.9c0,2.5-2.1,4.6-4.6,4.6h-70.3
c1.9,12.3,11.9,22.5,29,22.5c8.2-0.2,16.3-2.6,23.2-7c2.1-1.3,5-0.7,6.3,1.4c0.8,1.2,4.4,6.3,6.7,9.9c1.3,2,0.8,4.7-1,6.2
c-10.1,7.2-24.1,11.2-38.1,11.2C689.3,230.8,666.1,210.2,666.1,177.9z M718.3,146.8c-16.5,0-23.6,11.5-24.6,21.5h49.6
C742.5,158.7,735.8,146.8,718.3,146.8z"/>
<path class="st3" d="M495.1,223.7v-91.5c0-2.5,2.1-4.6,4.6-4.6H517c2.5,0,4.6,2.1,4.6,4.6v8.9c6.2-7.5,16.2-13.9,26.8-15.6
c2.6-0.4,5,1.5,5.3,4c0,0.2,0,0.4,0,0.5v15.7c0,2.5-2.1,4.6-4.6,4.6c-10.6-0.8-23.3,6.5-27.5,16.9v56.5c0,2.5-2.1,4.6-4.6,4.6h-17.2
C497.1,228.3,495.1,226.3,495.1,223.7z"/>
<path class="st3" d="M565.3,211.7l6.7-11.2c1.4-2.1,4.2-2.7,6.3-1.4c0.1,0,0.1,0.1,0.2,0.1c8.1,5.8,20.3,10.8,30.9,10.8
c11.5,0,16.9-4.4,16.9-10.6c0-16.5-59.7-2.9-59.7-42.6c0-16.9,14.6-31.7,41.3-31.7c13.3-0.1,26.3,3.8,37.2,11.4c1.8,1.4,2.3,4,1.2,6
c-0.9,1.6-3.6,6.5-5.8,10.3c-1.3,2.2-4.1,3-6.3,1.7c-0.1,0-0.1-0.1-0.2-0.1c-7.6-5.4-16.7-8.4-26.1-8.4c-9.6,0-15.9,4.2-15.9,9.8
c0,14.8,59.9,2.3,59.9,42.9c0,18.6-15.9,32.1-43.8,32.1c-16,0-31.3-4.8-42-13C564.5,216.3,564,213.6,565.3,211.7z"/>
<path class="st3" d="M854.9,132.2c0,18,0,47.6,0,53.3c0,8.8-7.6,17.9-21.3,17.9c-13.4,0-20.5-10.3-20.5-17.9v-53.3
c0-2.6-2.1-4.6-4.6-4.6h-17.3c-2.5,0-4.6,2.1-4.6,4.6c0,10.9,0,56,0,56c0,24.3,22,40.6,46.6,40.2c14.1-0.3,18.6-4.7,21.7-6.7
c0,15.3-7.7,23.1-16.4,25.2c-10.3,2.5-23.5,3-37.5-7.3c-2.1-1.4-5-1-6.5,1.1c-2.3,3.6-4.6,7.2-6.8,10.9c-1.5,2.6-0.7,5,1,6.3
c20.5,15.2,43.2,12.6,54.5,10.4c22.6-4.3,38.1-24.6,38.1-43.9v-92.3c0-2.6-2.1-4.6-4.6-4.6h-17.3C857,127.6,854.9,129.7,854.9,132.2
"/>
<path class="st3" d="M359.5,100.4c0-2.6-2.1-4.6-4.6-4.6h-18.4c-2.5,0-4.6,2.1-4.6,4.6v81.9c0,11.9-9.2,22.7-23.2,22.7
c-5.6,0-15.4-2.5-20.8-10.9c-1.2-2-3.8-2.7-5.9-1.7c-1.8,0.8-10.2,4.6-15.4,7c-2.7,1.2-2.8,4.8-2,6.3c4.5,7.6,16.5,23.9,43.9,23.9
c33.8,0,50.9-21.4,50.9-53.7L359.5,100.4L359.5,100.4z"/>
</svg>
  • What's your Inkscape version, @Danielillo? – Moini Nov 23 '18 at 20:51
  • I checked it after your comment, 0.91 – Danielillo Nov 23 '18 at 20:52
  • 1
    Wow, that's old :) (2015) – Moini Nov 23 '18 at 21:11
  • Yeap, i don't use It normally – Danielillo Nov 23 '18 at 21:16
  • 2
    Many thanks, I was using the default version in Ubuntu 16.04 but adding the ppa:inkscape.dev/stable repository and updating resolved the issue. Interesting issue with duplicate points too, I appreciate the research effort. – Tom Brossman Nov 24 '18 at 12:48

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.