Show Categories

For example, if I create an SVG and use an externally referenced font file, and if that font files has 100 glyphs, but my SVG only uses 10 of the glyphs, do the 90 unused glyphs gets stripped out of the font file before Base64 encoding? This is essentially my work flow with some other tools, doing the steps manually. Results are good but the process is tedious. Looking for a pure C program to portably compile on Android (Termux, Clang, NDK, BIONIC), Windows, and Linux, install as a Node.js package, and automate the process. I may have to write it myself and release as open source.

recent by radica  ·  Jul 15 '21 at 2:03 am


I recently found out about vecta and after browsing through the documentation I'm wondering if I would be able to create a "integrated" UI inside a vecta io board. Either fully handwritten in HTML, CSS and JavaScript or if there already is support for this via iframe or such.

The plugin examples that are provided seem very simple although I understand this is the beta phase I was looking to do something similar to the already integrated vecta layers functionality.

Where I could either add my own add to something which could represent a list of board objects same as in layers or some other functionality. And then handle these objects in a small UI pop-up such as the layers pop-up.

So generally my question is, could I technically with the current documentation and support develop something similar to current vecta layers in the form of a plugin? If so could you please link me to the part of documentation that has this, because I couldn't find this part.

thank you.

recent by radica  ·  Mar 1 '21 at 1:28 am

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="" xmlns:xlink="" width="1000" height="667" viewBox="0 0 1000 667">
      .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;
    <clipPath id="clip-Therapeutics_Fig1_07_SVG_No_Paths_1">
      <rect width="1000" height="667"/>
  <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)"/>
    <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 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 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>
      <line id="Line_211" data-name="Line 211" class="cls-8" y1="262" transform="translate(12 27.5)"/>
    <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>
      <line id="Line_211-2" data-name="Line 211" class="cls-8" y1="288" transform="translate(11.768 27.5)"/>
    <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


I want to use the formula to set the shape.fill property depending on a named shape on my drawing.

The goal is to quickly modify the fill of many elements in the drawing by defining a new color to an item with the name "alpha",

My idea was to do this ...

var shapeDefinition = $.shape('alpha');

if(shapeDefinition != null )
        this.fill = shapeDefinition.fill;
        this.fill = 0;

But that is not saveable in the formula field. There is neither an error message nor a status message.

recent by radica  ·  Feb 19 '21 at 10:29 am
sticky closed
radica posted Sep 28 '20 at 2:26 am

Welcome SVG fans!
Stay updated and connected with us (Vecta and Nano team) in this community.
This community is the place for

  • Sharing announcements on latest Vecta & Nano updates
  • Feature requests (Make sure to include some context)
  • Bug catching (We'd appreciate a screenshot)
  • Any Vecta, Nano or SVG related questions Channel Structure General - Everything about SVG (tips & tricks, discussions, showcase) Vecta - Announcement, feature request, or bug in Nano - Announcement, feature request, or bug in Nano Code of Conduct Be Clean, No harassment, No spam. We will remove or block anyone who we believe does not have good intentions to engage with the community
Hide topic messages
Enable infinite scrolling
All posts under this topic will be deleted ?
Pending draft ... Click to resume editing
Discard draft