Bug Reports | Vecta Community

Adam Hughes posted Apr 29 '21 at 6:28 pm
When working with an SVG (I will email it as I learned in my last post that long SVGs don't work well in this forum) I found the post-nano file neglected to base64 encode one of the fonts, resulting in a very different final result.
font embedded-font svg nano
recent by radica · Jun 29 '21 at 6:27 am
When minifying SVGs elements can move around
Adam Hughes posted Feb 26 '21 at 9:11 pm
I ran the attached SVG file through the web portal for nano. In the original you'll note there are two instaces of "2020" on the X-axis for each graph, but after running through nano (and having the fonts compile et cetera) the 2020s are no longer there (and there is a 2020 in the upper left-hand corner of the resulting SVG)
I tried opening it in Vecta and the "original" looks good, but the "minified" version shows the difference (this is why I suspect the minifier)
I tested just adding a @font-face rule with the base-64 encoded fonts directly into the source file and do not observer this issue (sadly this makes my file much bigger smile ).
(Edit: I don't see how to get at attached files, so including the SVG source for reference)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="667" viewBox="0 0 1000 667">
  <defs>
    <style>
      .cls-1 {
        clip-path: url(#clip-Therapeutics_Fig1_07_SVG_No_Paths_1);
      }

      .cls-11, .cls-13, .cls-16, .cls-2 {
        fill: #1b193f;
      }

      .cls-2 {
        font-size: 18px;
      }

      .cls-11, .cls-2 {
        font-family: Lato-Bold, Lato;
        font-weight: 700;
      }

      .cls-20, .cls-21, .cls-23, .cls-24, .cls-29, .cls-3, .cls-30, .cls-31, .cls-32, .cls-33, .cls-34, .cls-35, .cls-36, .cls-37, .cls-38, .cls-5, .cls-8 {
        fill: none;
      }

      .cls-3, .cls-5 {
        stroke: #dbdbdb;
      }

      .cls-29, .cls-3, .cls-30, .cls-31, .cls-32, .cls-33, .cls-34, .cls-35, .cls-36, .cls-37, .cls-38, .cls-5 {
        stroke-linecap: round;
      }

      .cls-10, .cls-12, .cls-14, .cls-4, .cls-9 {
        fill: #494765;
      }

      .cls-4 {
        font-size: 16px;
      }

      .cls-10, .cls-12, .cls-14, .cls-15, .cls-16, .cls-4, .cls-7 {
        font-family: Lato-Regular, Lato;
      }

      .cls-29, .cls-30, .cls-31, .cls-32, .cls-33, .cls-34, .cls-35, .cls-36, .cls-37, .cls-38, .cls-5 {
        stroke-width: 2px;
      }

      .cls-6 {
        fill: #05cfab;
      }

      .cls-15, .cls-39, .cls-42, .cls-7 {
        fill: #fff;
      }

      .cls-7 {
        font-size: 13px;
      }

      .cls-8 {
        stroke: #05cfab;
      }

      .cls-20, .cls-21, .cls-23, .cls-24, .cls-8 {
        stroke-dasharray: 2;
      }

      .cls-10 {
        font-size: 12px;
      }

      .cls-11, .cls-12 {
        font-size: 14px;
      }

      .cls-14 {
        font-size: 15px;
      }

      .cls-15, .cls-16 {
        font-size: 11px;
      }

      .cls-17 {
        fill: #f43f77;
      }

      .cls-18 {
        fill: #982770;
      }

      .cls-19 {
        fill: #1fa6d3;
      }

      .cls-20, .cls-35 {
        stroke: #1fa6d3;
      }

      .cls-21, .cls-36 {
        stroke: #f43f77;
      }

      .cls-22 {
        fill: #fdaf55;
      }

      .cls-23, .cls-38 {
        stroke: #fdaf55;
      }

      .cls-24, .cls-37 {
        stroke: #1b193f;
      }

      .cls-25 {
        fill: #064daa;
      }

      .cls-26 {
        fill: #feda56;
      }

      .cls-27 {
        fill: #f54a3e;
      }

      .cls-28 {
        fill: #86868b;
      }

      .cls-29 {
        stroke: #fed955;
      }

      .cls-30 {
        stroke: #86868b;
      }

      .cls-31 {
        stroke: #f54a3e;
      }

      .cls-32 {
        stroke: #04ceaa;
      }

      .cls-33 {
        stroke: #064daa;
      }

      .cls-34 {
        stroke: #982770;
      }

      .cls-40, .cls-41 {
        stroke: none;
      }

      .cls-41 {
        fill: #707070;
      }
    </style>
    <clipPath id="clip-Therapeutics_Fig1_07_SVG_No_Paths_1">
      <rect width="1000" height="667"/>
    </clipPath>
  </defs>
  <g id="Therapeutics_Fig1_07_SVG_No_Paths_1" data-name="Therapeutics_Fig1_07 SVG No Paths – 1" class="cls-1">
    <rect class="cls-42" width="1000" height="667"/>
    <text id="Secondary_Treatments" data-name="Secondary Treatments" class="cls-2" transform="translate(523.889 60)"><tspan x="0" y="0">Secondary Treatments</tspan></text>
    <g id="Horizontal_Lines" data-name="Horizontal Lines" transform="translate(573.5 145.5)">
      <line id="Line_1" data-name="Line 1" class="cls-3" x2="413.5"/>
      <line id="Line_2" data-name="Line 2" class="cls-3" x2="413.5" transform="translate(0 35)"/>
      <line id="Line_3" data-name="Line 3" class="cls-3" x2="413.5" transform="translate(0 70)"/>
      <line id="Line_5" data-name="Line 5" class="cls-3" x2="413.5" transform="translate(0 105)"/>
      <line id="Line_6" data-name="Line 6" class="cls-3" x2="413.5" transform="translate(0 140)"/>
      <line id="Line_7" data-name="Line 7" class="cls-3" x2="413.5" transform="translate(0 175)"/>
      <line id="Line_8" data-name="Line 8" class="cls-3" x2="413.5" transform="translate(0 210)"/>
      <line id="Line_10" data-name="Line 10" class="cls-3" x2="413.5" transform="translate(0 245)"/>
      <line id="Line_175" data-name="Line 175" class="cls-3" x2="413.5" transform="translate(0 280)"/>
    </g>
    <text id="Y_Axis_Labels" data-name="Y Axis Labels" class="cls-4" transform="translate(522 135)"><tspan x="8.432" y="16">80%</tspan><tspan x="8.432" y="51">70%</tspan><tspan x="8.432" y="86">60%</tspan><tspan x="8.432" y="121">50%</tspan><tspan x="8.432" y="156">40%</tspan><tspan x="8.432" y="191">30%</tspan><tspan x="8.432" y="226">20%</tspan><tspan x="8.432" y="261">10%</tspan><tspan x="13.072" y="296">0%</tspan></text>
    <g id="X_Axis_Tick_Marks" data-name="X Axis Tick Marks" transform="translate(573.576 426.5)">
      <line id="Line_12" data-name="Line 12" class="cls-5" y2="6" transform="translate(91.907)"/>
      <line id="Line_13" data-name="Line 13" class="cls-5" y2="6" transform="translate(32)"/>
      <line id="Line_233" data-name="Line 233" class="cls-5" y2="3" transform="translate(16)"/>
      <line id="Line_234" data-name="Line 234" class="cls-5" y2="3" transform="translate(48)"/>
      <line id="Line_237" data-name="Line 237" class="cls-5" y2="3" transform="translate(106.504)"/>
      <line id="Line_240" data-name="Line 240" class="cls-5" y2="3" transform="translate(168.469)"/>
      <line id="Line_243" data-name="Line 243" class="cls-5" y2="3" transform="translate(228.499)"/>
      <line id="Line_246" data-name="Line 246" class="cls-5" y2="3" transform="translate(289.496)"/>
      <line id="Line_249" data-name="Line 249" class="cls-5" y2="3" transform="translate(349.787)"/>
      <line id="Line_235" data-name="Line 235" class="cls-5" y2="3" transform="translate(64)"/>
      <line id="Line_238" data-name="Line 238" class="cls-5" y2="3" transform="translate(121.995)"/>
      <line id="Line_241" data-name="Line 241" class="cls-5" y2="3" transform="translate(183.961)"/>
      <line id="Line_244" data-name="Line 244" class="cls-5" y2="3" transform="translate(243.99)"/>
      <line id="Line_247" data-name="Line 247" class="cls-5" y2="3" transform="translate(304.988)"/>
      <line id="Line_250" data-name="Line 250" class="cls-5" y2="3" transform="translate(365.787)"/>
      <line id="Line_236" data-name="Line 236" class="cls-5" y2="3" transform="translate(80)"/>
      <line id="Line_239" data-name="Line 239" class="cls-5" y2="3" transform="translate(137.486)"/>
      <line id="Line_242" data-name="Line 242" class="cls-5" y2="3" transform="translate(199.452)"/>
      <line id="Line_245" data-name="Line 245" class="cls-5" y2="3" transform="translate(259.482)"/>
      <line id="Line_248" data-name="Line 248" class="cls-5" y2="3" transform="translate(319.96)"/>
      <line id="Line_251" data-name="Line 251" class="cls-5" y2="3" transform="translate(381.787)"/>
      <line id="Line_261" data-name="Line 261" class="cls-5" y2="3" transform="translate(412.787)"/>
      <line id="Line_232" data-name="Line 232" class="cls-5" y2="3" transform="translate(0)"/>
      <line id="Line_14" data-name="Line 14" class="cls-5" x2="0.165" y2="6" transform="translate(152.902)"/>
      <line id="Line_16" data-name="Line 16" class="cls-5" y2="6" transform="translate(213.375)"/>
      <line id="Line_17" data-name="Line 17" class="cls-5" y2="6" transform="translate(274.373)"/>
      <line id="Line_193" data-name="Line 193" class="cls-5" y2="6" transform="translate(334.167)"/>
      <line id="Line_194" data-name="Line 194" class="cls-5" y2="6" transform="translate(397.167)"/>
    </g>
    <g id="Group_673" data-name="Group 673" transform="translate(554 109)">
      <g id="Group_604" data-name="Group 604">
        <g id="Group_572" data-name="Group 572">
          <rect id="Rectangle_7" data-name="Rectangle 7" class="cls-6" width="24" height="20" rx="10" transform="translate(28) rotate(90)"/>
          <path id="Polygon_1" data-name="Polygon 1" class="cls-6" d="M10,0,20,12H0Z" transform="translate(0 22) rotate(-90)"/>
          <text id="_1_" data-name="1 " class="cls-7" transform="translate(12.888 17)"><tspan x="0" y="0">1 </tspan></text>
        </g>
      </g>
    </g>
    <g id="Group_674" data-name="Group 674" transform="translate(568 135)">
      <g id="Group_604-2" data-name="Group 604">
        <g id="Group_572-2" data-name="Group 572">
          <rect id="Rectangle_7-2" data-name="Rectangle 7" class="cls-6" width="24" height="20" rx="10"/>
          <path id="Polygon_1-2" data-name="Polygon 1" class="cls-6" d="M10,0,20,12H0Z" transform="translate(22 28) rotate(180)"/>
          <text id="_2" data-name="2" class="cls-7" transform="translate(8.888 17)"><tspan x="0" y="0">2</tspan></text>
        </g>
      </g>
      <line id="Line_211" data-name="Line 211" class="cls-8" y1="262" transform="translate(12 27.5)"/>
    </g>
    <g id="Group_675" data-name="Group 675" transform="translate(630 109)">
      <g id="Group_604-3" data-name="Group 604">
        <g id="Group_572-3" data-name="Group 572">
          <rect id="Rectangle_7-3" data-name="Rectangle 7" class="cls-6" width="24" height="20" rx="10" transform="translate(0)"/>
          <path id="Polygon_1-3" data-name="Polygon 1" class="cls-6" d="M10,0,20,12H0Z" transform="translate(22 28) rotate(180)"/>
          <text id="_3" data-name="3" class="cls-7" transform="translate(8.656 17)"><tspan x="0" y="0">3</tspan></text>
        </g>
      </g>
      <line id="Line_211-2" data-name="Line 211" class="cls-8" y1="288" transform="translate(11.768 27.5)"/>
    </g>
    <path id="Polygon_5" data-name="Polygon 5" class="cls-9" d="M3.5,0,7,6H0Z" transform="translate(602 428)"/>
    <text id="X_Axis_Labels" data-name="X Axis Labels" class="cls-10" transform="translate(583.535 439.388)"><tspan x="12.19" y="12">Apr</tspan><tspan class="cls-11"><tspan x="5.76" y="30">2020</tspan></tspan></text>
    <text id="X_Axis_Labels-2" data-name="X Axis Labels" class="cls-12" transform="translate(651.442 439.388)"><tspan x="0.039" y="14">May</tspan></text>
    <text id="X_Axis_Labels-3" data-name="X Axis Labels" class="cls-12" transform="translate(712.78 439.388)"><tspan x="2.608" y="14">Jun</tspan></text>
    <text id="X_Axis_Labels-4" data-name="X Axis Labels" class="cls-12" transform="translate(772.181 439.388)"><tspan x="4.708" y="14">Jul</tspan></text>
    <text id="X_Axis_Labels-5" data-name="X Axis Labels" class="cls-12" transform="translate(833.562 439.388)"><tspan x="1.271" y="14">Aug</tspan></text>
    <text id="X_Axis_Labels-6" data-name="X Axis Labels" class="cls-12" transform="translate(893.951 439.388)"><tspan x="2.258" y="14">Sep</tspan></text>
    <text id="X_Axis_Labels-7" data-name="X Axis Labels" class="cls-12" transform="translate(956.322 439.388)"><tspan x="2.034" y="14">Oct</tspan></text>
    <circle id="Ellipse_5" data-name="Ellipse 5" class="cls-13" cx="8.5" cy="8.5" r="8.5" transform="translate(201 573)"/>
    <text id="Dexamethasone" class="cls-14" transform="translate(222 572)"><tspan x="0" y="15">Dexamethasone</tspan></text>
    <rect id="Rectangle_11" data-name="Rectangle 11" class="cls-13" width="16" height="16" rx="8" transform="translate(215 594)"/>
    <text id="_6" data-name="6" class="cls-15" transform="translate(219.889 606)"><tspan x="0" y="0">6</tspan></text>
    <text id="RECOVERY_trial_announces_pre-publication_results_6_16" data-name="RECOVERY trial announces pre-publication results 6/16" class="cls-16" transform="translate(234 594)"><tspan x="0" y="11">RECOVERY trial </tspan><tspan x="0" y="25">announces pre-publication </tspan><tspan x="0" y="39">results 6/16</tspan></text>
    <circle id="Ellipse_4" data-name="Ellipse 4" class="cls-17" cx="8.5" cy="8.5" r="8.5" transform="translate(201 496)"/>
    <text id="Convalescent_Plasma" data-name="Convalescent Plasma" class="cls-14" transform="translate(222 495)"><tspan x="0" y="15">Convalescent Plasma</tspan></text>
    <rect id="Rectangle_11-2" data-name="Rectangle 11" class="cls-17" width="16" height="16" rx="8" transform="translate(214 518)"/>
    <text id="_3-2" data-name="3" class="cls-15" transform="translate(217.889 530)"><tspan x="0" y="0">3</tspan></text>
    <text id="Expanded_Access_Program_initiates_treatmen
recent by radica · Mar 1 '21 at 12:38 am
Pending draft
