Add SVG image?

I want to use this lock image. I downloaded it into images/lock.svg.

My goal is to display it large, in red with a heavy stroke. So far I was only to display it in default size using jp.Div. I failed with Svg & Img. Div displays an image and I was able to set the size of the Div and change the background color but not the color used in the drawing. How would you start this?

    d = jp.Div(classes='w-7/8 m-2 p-3 border rounded-lg ', a=wp)
    jp.Svg(image='images/lock.svg', a=d)
    jp.Svg(svg='images/lock.svg', a=d)
    jp.Svg(script='images/lock.svg', a=d)
    jp.Img(src='images/lock.svg', a=d)
    lock = jp.Div(a=d, inner_html=open('images/lock.svg').read())
    lock.height = 100  # Copied from [Specific Attributes](https://justpy.io/tutorial/html_components/#specific-attributes) 
    lock.width = 100
    lock = jp.Div(a=d, inner_html=open('images/lock.svg').read(), classes='w-64 h-64 fg-red-700 bg-blue-500 hover:bg-blue-700')

[johnmudd]

So simple. Thanks.

[elimintz]

Td is equivalent to the HTML td tag https://www.w3schools.com/tags/tag_td.asp which is just a cell in the table. You can add elements to it like you add to a Div.

The example below creates a simple table with the svg element in the cells. Just so that it is not too boring, I made the svg size dependent on the column:

import justpy as jp

svg_html = """
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-lock" 
     viewBox="0 0 24 24" stroke-width="2" 
     stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
  <path stroke="none" d="M0 0h24v24H0z"/>
  <rect x="5" y="11" width="14" height="10" rx="2" />
  <circle cx="12" cy="16" r="1" />
  <path d="M8 11v-4a4 4 0 0 1 8 0v4" />
</svg>

"""

def svg_table_example():
    wp = jp.WebPage()
    table = jp.Table(a=wp)
    thead = jp.Thead(a=table)
    tr = jp.Tr(a=thead)
    for item in ['Header 1', 'Header 2', 'Header 3']:
        jp.Th(text=item, classes='', a=tr)
    tbody = jp.Tbody(a=table)
    for row in range(5):
        tr = jp.Tr(a=tbody)
        for col in range(1, 4):
            td = jp.Td(a=tr)
            svg_element = jp.parse_html(svg_html, a=td)
            svg_element.width = col * 10
            svg_element.height = col * 10
            svg_element.color = 'red'
    return wp

jp.justpy(svg_table_example)