Information
This is a really basic SVG file importer that will just convert your SVG files into Roblox objects. The importer module only supports rect objects. I just made this for fun to make it easier to create a layout of my UI before actually creating it in Roblox. I figured maybe some other people would like to use it. You can download it below:
SVG Importer.lua (5.1 KB)
How To Use
NOTE: I recommend just using the plugin you can get it below and skip all of this information.
Once you have an SVG file created after using whatever program (I use Figma) you need to correctly format it. Right click the file, click open with, and select Notepad.
You have to ensure that each object you wanted created begins on a new line. For example, Illustrator will format the SVG file with everything on the same line. You will have to manually move each tag to a new line. Figma automatically does this for you. The file should now look like:
Notice how each tag is on a separate line. You can now just copy and paste this into a Local Script like so:
The module itself only has the one :Convert(string rawSVG) method. Hit Play and you’ll see the GUI appear in StarterGui. From there just right click and hit copy.
You can then hit Stop and paste the GUI into your StarterGui or wherever.
Examples
Here my UI in Figma looks like so:
Note: Notice how I have a rectangle stretching across the entire UI as a background. I recommend you do this to prevent wonky scaling.
Once I use the SVG Importer module it appears like so in Studio:
Aspect ratio is preserved. You’ll notice the text doesn’t appear and the arrow is incorrectly positioned. These are some major limitations of the module. That’s just due to the nature of how SVG file data is stored the easiest fix is to just reposition the arrow parts manually.
Practicality
Overall I believe that this module is pratical for just creating primitive UI bases. It will primarily save you time on having to create all the different components of a UI in Studio which I despise.
I have no plans to update this module or add support for other SVG components. I’m sure someone else can significantly improve upon what I’ve created so far.