Share via

Small Basic: How to import SVG drawings

  • Article

​

Adapted from this post: "small basic graphic and animations and more (14)" by Tryhest.

Requirement 

Download a SVG drawing

You can find many SVG drawing on MIT site:

https://social.msdn.microsoft.com/Forums/getfile/1569951

  1. Press the big cat+ button and select a drawing;
  2. After selecting remove all sounds and cat files;
  3. Save to local folder
  4. Rename the saved file to .zip
  5. You will get following after opening zip:

https://social.msdn.microsoft.com/Forums/getfile/1569952

Extract the bigger SVG file and open it with inkscape:

https://social.msdn.microsoft.com/Forums/getfile/1569953

display in outline mode:

https://social.msdn.microsoft.com/Forums/getfile/1569954

SVG Editing

  • Ungroup shapes and also all subgroups
  • Use node editing tool
  • Remove unnecessary paths (can be tricky sometimes)
  • Select all nodes on a path add nodes
  • Press + button to add nodes
  • Repeat until u get enough nodes (don't overexceed)
  • Select all added nodes and convert to lines

Final result:

https://social.msdn.microsoft.com/Forums/getfile/1569955

https://social.msdn.microsoft.com/Forums/getfile/1569956

Save SVG file to new one:

SVG Text Editing

  • This is the hardest task, as it is very demanding and tricky
  • SVG file has many features but we need only d="m ...  lines
  • Also the polylines can be encoded in many ways, absolute or relative coords 
  • There can be also e-number forms which u may write as zero values 0

Source SVG:

https://social.msdn.microsoft.com/Forums/getfile/1569957

After filtering:

https://social.msdn.microsoft.com/Forums/getfile/1569958

Remove the Z " from end of each line, as well as d="m from beginnings.

Use FIND to count all L letters, turn on wordwrap to see all lines at once.

https://social.msdn.microsoft.com/Forums/getfile/1569959

Now you must comprehend coords system:

  • The first 2 coords after M are basepoints, after that are relative offsets;
  • If you find L-l block, the coords are absolute, not relative;
  • You must insert letter **a **before each absolute pair;
  • The last pair in one in L-l block must be preceded by** r **letter, which resets to rel. coords again;
  • Remove all L letters when done;
  • Also replace "," with " " (commas with spaces).

Final file:

https://social.msdn.microsoft.com/Forums/getfile/1569960

In Small Basic:

  • You may use **DWV062 **for all next Small Basic imports;
  • After first import you may encounter many issues, as displacing and missing parts;
  • Set fill to transparent for better seeing results;
  • You will obtain this at first import.

https://social.msdn.microsoft.com/Forums/getfile/1569961

Now you can modify colors and add effects.

Use delay 2222 for better understanding parts ordering.

Final result:

https://social.msdn.microsoft.com/Forums/getfile/1569962

As final part you return to notepad++ and replace lineends to "`" sign.

https://social.msdn.microsoft.com/Forums/getfile/1569963

After that, select all line and paste to Small Basic instead of File.GetContents

Addendum

You can use LDImage.LoadSVG(fileName), but it gives u a BMP output, not as shapes as shown above!

Sample Programs

SVG Challenge - by Nonki Takahashi and others