SVG graphics generated from text instead of a file

MIT App Inventor Help
1

How can I display an SVG image like in TIMAI2's example below, but not by providing an SVG file, but by entering the code in a text block that generates the SVG graphic? For example, code like this:

image
image851×138 4.8 KB

image

(I want to change this code while the application is running)
(Sorry for my English)

2

This (your svg xml) returns a "hamburger" icon ?

image

image
image838×135 14.2 KB

3

Yes, it's a menu icon. Thank you

4

Is it possible to change the icon color to something other than black? If I enter code that includes, for example, fill="#78A75A" the image doesn't display. For graphics in SVG files, the browser displays the color correctly

5

Please provide your example svg xml (as text) including your colour stanza that you say works in a browser...

6 
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#8B7DBE"><path d="M433-80q-27 0-46.5-18T363-142l-9-66q-13-5-24.5-12T307-235l-62 26q-25 11-50 2t-39-32l-47-82q-14-23-8-49t27-43l53-40q-1-7-1-13.5v-27q0-6.5 1-13.5l-53-40q-21-17-27-43t8-49l47-82q14-23 39-32t50 2l62 26q11-8 23-15t24-12l9-66q4-26 23.5-44t46.5-18h94q27 0 46.5 18t23.5 44l9 66q13 5 24.5 12t22.5 15l62-26q25-11 50-2t39 32l47 82q14 23 8 49t-27 43l-53 40q1 7 1 13.5v27q0 6.5-2 13.5l53 40q21 17 27 43t-8 49l-48 82q-14 23-39 32t-50-2l-60-26q-11 8-23 15t-24 12l-9 66q-4 26-23.5 44T527-80h-94Zm49-260q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Z"/></svg>
7

Works with colour names, e.g. red, blue, lime, doesn't seem to like hex.

Maybe you can find your preferred colour (name) HERE

8 
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#8B7DBE"><path d="M433-80q-27 0-46.5-18T363-142l-9-66q-13-5-24.5-12T307-235l-62 26q-25 11-50 2t-39-32l-47-82q-14-23-8-49t27-43l53-40q-1-7-1-13.5v-27q0-6.5 1-13.5l-53-40q-21-17-27-43t8-49l47-82q14-23 39-32t50 2l62 26q11-8 23-15t24-12l9-66q4-26 23.5-44t46.5-18h94q27 0 46.5 18t23.5 44l9 66q13 5 24.5 12t22.5 15l62-26q25-11 50-2t39 32l47 82q14 23 8 49t-27 43l-53 40q1 7 1 13.5v27q0 6.5-2 13.5l53 40q21 17 27 43t-8 49l-48 82q-14 23-39 32t-50-2l-60-26q-11 8-23 15t-24 12l-9 66q-4 26-23.5 44T527-80h-94Zm49-260q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Z"/></svg>

This code worked when saved as an .svg file – it displayed as a purple icon.

Works with colour names, e.g. red, blue, lime, doesn't seem to like hex.

Does this mean that I can specify a color in hexadecimal in an SVG file, but only in words in the code in a text block?

9

Possibly, for an svg datauri, but try in an html file with an svg e.g.

<!DOCTYPE html>
<html>
<body>

<h2>SVG fill-opacity attribute</h2>

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FF6600"><path d="M160-240q-17 0-28.5-11.5T120-280q0-17 11.5-28.5T160-320h640q17 0 28.5 11.5T840-280q0 17-11.5 28.5T800-240H160Zm0-200q-17 0-28.5-11.5T120-480q0-17 11.5-28.5T160-520h640q17 0 28.5 11.5T840-480q0 17-11.5 28.5T800-440H160Zm0-200q-17 0-28.5-11.5T120-680q0-17 11.5-28.5T160-720h640917 0 28.5 11.5T840-680q0 17-11.5 28.5T800-640H160Z"/></svg>
 
</body>
</html>

It works...

10

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.