Custom SVG Builder

Show and Tell
#1

Hello, Anviler’s,

I recently started a project where I needed an interactive canvas for a user to visually configure their project. I went back and forth on what the best architecture for the project would be (canvas or SVG). I have ultimately decided to use SVG with Greensock to handle animations and drag-n-drop functionality rather than handling everything through canvas redraw functions.

Unfortunately, there is no built-in SVG component in Anvil. That’s why I decided to build a custom SVG component that I could use to design any SVG I want directly from the Anvil IDE. This is what I came up with.

Hope everyone enjoys it!

https://anvil.works/build#clone:GAGNLHYYNOOSDGX4=J3V3XL5EWZULGCS4HCIVC42C

8 Likes
SVG manipulation in anvil
#2

That’s very slick! Thanks for sharing.

1 Like
#3

I’ve made some updates to this.

Version Update Outline

Code Quality Improvements

SVG Class

  • Improved code readability

Examples Class

  • Improved code readability
  • Improved documentation strings

New Features

SVG Class

  • Added svg_string property
  • Added image property
  • Added url property

Examples Class

  • Added an inherited color example
  • Added use as icon example
  • Added a use as image example

Method Enhancements

SVG Class

  • Improved scale_svg method

Structural Changes

SVG Class

  • Moved standalone functions into SVG class as static methods
1 Like