SVG importing issue

Ask the community
1

Hey! I’ve been trying to import an SVG file, but when doing so it’s missing some of the lines. I tried importing the same file into other online vector tools and they import it just fine. Is this a recurring issue?

2

Could you send this issue to support@penpot.app?

3

I came across a similar issue and think I’ve determined what’s causing it. Here’s how to recreate the issue and investigate:

  1. Feather has very simple SVG icons, so it’s a good test. https://feathericons.com/

  2. Alert Circle is an icon that ends up looking like it’s missing parts when you drag into Penpot.

  3. When expanding the alert-circle layer in Penpot, you will see the two SVG lines are indeed inside. But if you select one of those lines and look at the design palette in Penpot, you will see the two start/end options are turned off (not sure what Penpot calls them since no tooltip shows up when I hover over those dropdowns). If you manually turn on the round option from this dropdown for start & end, the dot in the Alert Circle shows up again. Same for the line above, turning on round for start & end makes it appear correctly as designed.

  4. Open the SVG code in SVG Viewer or any code editor. Alert Circle includes the following code applied to the overall object, not the individual parts to display the rounded ends and the dot:

stroke-linecap=“round” stroke-linejoin=“round” (full code below)

  1. Conclusion: Penpot is not paying attention to all of the SVG code or is using different terminology/variables to display endcaps/linecaps.

PS: I sent a copy of this troubleshooting to support@
PPS: It also is missing endcaps if you past in the exclamation-circle from Hero Icons

5

Here’s a comparison of the code from feather versus what Penpot output only AFTER adding the endcaps back on using the design palette dropdowns:

<!-- feather's code for alert-circle -->

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

<!-- penpot's code for group: alert-circle -->
<div class="shape group alertcirc-afeff8b6c092">
  <svg width="24" xmlns="http://www.w3.org/2000/svg" height="24" id="screenshot-762d68bb-be38-8005-8004-afeff8b6c092" viewBox="222 519 24 24" style="-webkit-print-color-adjust::exact" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1">
    <g id="shape-762d68bb-be38-8005-8004-afeff8b6c092" data-testid="alert-circle" style="fill:#000000" width="24" class="feather feather-alert-circle" height="24" rx="0" ry="0">
      <defs></defs>
      <g id="shape-762d68bb-be38-8005-8004-afeff8b7d8d3" data-testid="base-background" style="display:none">
        <defs></defs>
        <g class="fills" id="fills-762d68bb-be38-8005-8004-afeff8b7d8d3">
          <rect rx="0" ry="0" x="222" y="519" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="24" height="24" fill="none" stroke-linejoin="round" style="fill:none"></rect>
        </g>
        <g fill="none" stroke-linejoin="round" id="strokes-762d68bb-be38-8005-8004-afeff8b7d8d3" class="strokes">
          <g class="stroke-shape">
            <defs></defs>
            <rect rx="0" ry="0" x="222" y="519" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" width="24" height="24" style="fill:none;fill-opacity:none;stroke-width:2;stroke:#000000;stroke-opacity:1"></rect>
          </g>
        </g>
      </g>
      <g id="shape-762d68bb-be38-8005-8004-afeff8b80db5" data-testid="svg-circle">
        <defs></defs>
        <g class="fills" id="fills-762d68bb-be38-8005-8004-afeff8b80db5">
          <ellipse cx="234" cy="531" rx="10" ry="10" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" fill="none" stroke-linejoin="round" style="fill:none"></ellipse>
        </g>
        <g fill="none" stroke-linejoin="round" id="strokes-762d68bb-be38-8005-8004-afeff8b80db5" class="strokes">
          <g class="stroke-shape">
            <defs></defs>
            <ellipse cx="234" cy="531" rx="10" ry="10" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill:none;fill-opacity:none;stroke-width:2;stroke:#000000;stroke-opacity:1"></ellipse>
          </g>
        </g>
      </g>
      <g id="shape-762d68bb-be38-8005-8004-afeff8b896e9" data-testid="svg-line">
        <defs></defs>
        <g class="fills" id="fills-762d68bb-be38-8005-8004-afeff8b896e9">
          <path d="M234.000,527.000L234.000,531.000" fill="none" stroke-linejoin="round" style="fill:none"></path>
        </g>
        <g fill="none" stroke-linejoin="round" id="strokes-762d68bb-be38-8005-8004-afeff8b896e9" class="strokes">
          <g class="stroke-shape">
            <defs></defs>
            <path d="M234.000,527.000L234.000,531.000" style="fill:none;fill-opacity:none;stroke-width:2;stroke:#000000;stroke-opacity:1;stroke-linecap:round"></path>
          </g>
        </g>
      </g>
      <g id="shape-762d68bb-be38-8005-8004-afeff8b896ea" data-testid="svg-line">
        <defs></defs>
        <g class="fills" id="fills-762d68bb-be38-8005-8004-afeff8b896ea">
          <path d="M234.000,535.000L234.000,535.000Z" fill="none" stroke-linejoin="round" style="fill:none"></path>
        </g>
        <g fill="none" stroke-linejoin="round" id="strokes-762d68bb-be38-8005-8004-afeff8b896ea" class="strokes">
          <g class="stroke-shape">
            <defs></defs>
            <path d="M234.000,535.000L234.000,535.000Z" style="fill:none;fill-opacity:none;stroke-width:2;stroke:#000000;stroke-opacity:1;stroke-linecap:round"></path>
          </g>
        </g>
      </g>
    </g>
  </svg>
</div>