Extension Suggestion: SVG

Extensions
1

Support for the SVG format:

  1. Programmatically creating SVG files
  2. Converting Canvas drawings to SVG files
  3. Drawing SVG files on Canvas.

All three including text support using App developer's fonts and font colours.

2 Likes
2

taken from the extensions directory App Inventor Extensions | Pura Vida Apps

Taifun

3

Neither are close to the spec in Post #1

4

The main problem is Android doesn't directly supports SVG files. Android uses VectorDrawable xml reosurce. In Android Studio, we have a tool called Vector Asset Studio which helps to import svg files as vector drawable xml resources.

I don't say it is impossible but it is very difficult work to make svg work in the android.

5

Svg is the xml file with particular elements and attributes. For example,


<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-147 -70 294 345">
<g fill="#a4c639">
<use stroke-width="14.4" xlink:href="#b" stroke="#FFF"/>
<use xlink:href="#a" transform="scale(-1,1)"/>
<g id="a" stroke="#FFF" stroke-width="7.2">
<rect rx="6.5" transform="rotate(29)" height="86" width="13" y="-86" x="14"/>
<rect id="c" rx="24" height="133" width="48" y="41" x="-143"/>
<use y="97" x="85" xlink:href="#c"/>
</g>
<g id="b">
<ellipse cy="41" rx="91" ry="84"/>
<rect rx="22" height="182" width="182" y="20" x="-91"/>
</g>
</g>
<g stroke="#FFF" stroke-width="7.2" fill="#FFF">
<path d="m-95 44.5h190"/><circle cx="-42" r="4"/><circle cx="42" r="4"/>
</g>
</svg>

So, Svg can already be created using file component.

1 Like
6

It would work well in the Web Viewer (for display only) and perhaps then the Extension would convert from SVG to Android VectorDrawable for the Canvas. What does App Inventor actually use for the Canvas, something bespoke or also Android VectorDrawable?

7

It can be saved but there are no tools (Blocks) to create it.

8

This is a small aia. The svg routine is from either @Italo or @Ken. Made while testing @Ken his extended canvas extension. This was never released.

I converted it to the standard canvas component. You can drag your finger over the screen. What you have drawn can be saved as a png or a svg. The svg and png are saved in the ASD folder on my phone with Android 12. Since this was made a long time ago before all the big changes you will have to do some work yourself to save it to the right place.

signature_canvas.aia (110.3 KB)

image

blocks
blocks2795×1529 578 KB

Examples

signature_1653136413771
signature_16531364137712204×1036 69.3 KB

I can not upload a svg file so you have to take my word for it that it works.

9

Just change the file extension to .txt

1 Like
10

Tried it. It says it is not allowed even if I changed it to txt.

11

Not to worry - we can save our own. :grin:

1 Like
12

This is not App Inventor, but I think it might be interesting.

Convert an image to svg using JavaScript and view it in a Browser.

<!DOCTYPE html><html>
<head>
<style>
#iconsvg{display:inline-block;}
</style>
</head>

<body>
<img src="ayto.jpg" width="250" height="188">
<div id="svgcontainer"></div>
<img src="logoai.png" width="454" height="120">
<span id="iconsvg"></span>

<script src="imagetracer_v1.2.6.js"></script>
<script>
ImageTracer.imageToSVG(
	'ayto.jpg',
	function(svgstr){ImageTracer.appendSVGString(svgstr, 'svgcontainer');},
	{numberofcolors: 256, scale:.4},
	'Curvy'
);
ImageTracer.imageToSVG(
	'logoai.png',
	function(svgstr){ImageTracer.appendSVGString(svgstr, 'iconsvg');},
	{ltres:0.1, qtres:0.1, scale:.5, strokewidth:0, numberofcolors: 8}
);
</script>
</body>
</html>

  • ayto.jpg, logoai.png, imagetracer_v1.2.6.js and svg2.htm in my hosting.

  • http://kio4.com/0000borrar/svg2.htm

  • It works when it's on my hosting, but it doesn't work locally, that is, everything on PC.

  • In App Inventor it works, but it takes a few seconds to convert:

borr_svg.aia (129.3 KB)

00000000000000000000000000000000000000000000
- Another example.
Get the codes that create the svg image.

svg4.htm

<!DOCTYPE html><html>
<head>
</head>

<body>
<img src="logoai.png" width="454" height="120">
<span id="iconsvg"></span>

<script src="imagetracer_v1.2.6.js"></script>
<script>
ImageTracer.imageToSVG(
	'logoai.png',
	function(svgstr){ImageTracer.appendSVGString(svgstr, 'iconsvg');},
	{ltres:0.1, qtres:0.1, scale:.5, strokewidth:0, numberofcolors: 8}
);

ImageTracer.imageToTracedata(
	'logoai.png',
	function(tracedata){window.AppInventor.setWebViewString(JSON.stringify(tracedata));},
	{ltres:0.1, qtres:1,scale:.5, strokewidth:0, numberofcolors: 8}
);
</script>
</body>
</html>

borr_svg_4.aia (130.2 KB)

blocksffff

1 Like