[PLUGIN] - Font To SVG

Showcase
1

Hi all,

I’ve put together a rather useful plugin which will generate SVG from Google Fonts. It was something @justinnnnnn pointed out and I thought it was pretty neat so it’s now a plugin for all to use.

image
image824×996 69.6 KB

I’ve seen a number of plugins (especially some of the map plugins) which allow you to use symbols as markers. Symbols are generally a lot quicker to load and they’re typically made up of the SVG path value to generate the shapes which are then used on the map.

Now, being the kind sole that I am, you can just use the demo page if you want to generate the SVG data, but it’s available on the market place if you need a copy of it to integrate into your own apps.

I use symbols in 2 of my other plugins (an over complicated Star Rating plugin and a fully functional Google Maps with Drawing/Geometry plugin).

Anyway, hopefully it will prove useful to some of you. It’s a small plugin and here are the details…

PLUGIN
Font to SVG Plugin | Bubble

DEMO
https://paul-testing-4.bubbleapps.io/font_to_svg

image
image1083×903 54.4 KB

ELEMENT

Font To SVG
This visual element needs to be placed onto the page.

  • Show example area
    This setting is to be used if you want to show some example content at the top of the screen. You can enable/disable this dynamically if needed. You’ll probably only want to use this for testing purposes.

When it’s set to Yes, you’ll see this test/example area appear at the top of page which you can use for getting further information, it looks like this…

image
image1322×798 63.9 KB

ACTIONS

  • Get SVG
    Gets the SVG for a font.
    -Text
    Text to be used to generate the SVG.
    -Font
    Pass in one of the fonts which are in the 'Fonts' exposed state.
    -Variant
    Pass in one of the font variants which are stored in the 'Variants' exposed state. You should run the 'Get Font Variants' action first which will populate this state with a list valid for the selected font. When this field is left empty, it will always use the regular value.
    -Size
    Font size.
    -Fill
    Whether you want the font to be filled or not. Note: This doesn't change the SVG path value, it changes the Fill property within the SVG itself.

  • Get Font Variants
    Retrieves variants of a font. Running this action retrieves variants for a given font and updates the ‘Variants’ exposed state.
    -Font
    Pass in one of the fonts which are in the 'Fonts' exposed state.

EXPOSED STATES

  • SVG
    Contains the full SVG string.

  • Fonts
    Contains a list of all Google fonts.

  • Variants
    Contains a list of variants for a given font.

  • SVG Path
    Contains the path value for the SVG string.

  • SVG ViewBox
    Contains the viewBox value for the SVG string.

  • SVG ViewBox X
    Contains the X value for the viewBox.

  • SVG ViewBox Y
    Contains the Y value for the viewBox.

  • SVG ViewBox W
    Contains the width value for the viewBox.

  • SVG ViewBox H
    Contains the height value for the viewBox.

Paul