Add SVG image?
See original GitHub issueI 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')
Issue Analytics
- State:
- Created 3 years ago
- Comments:6
Top Results From Across the Web
How to Use SVG Images in CSS and HTML – A Tutorial for ...
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in...
Read more >Using SVG | CSS-Tricks
SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator.
Read more >Adding vector graphics to the web - Learn web development
SVG is an XML-based language for describing vector images. It's basically markup, like HTML, except that you've got many different elements for ...
Read more >The Best Way to Embed SVG on HTML (2021) - Vecta.io
2. Using an <object> tag ; <object type="image/svg+xml" data="image.svg"> ; <img src="image.svg" /> ; </object> ...
Read more >30. Different ways of adding SVG Image in the HTML ...
In this video we will see the different ways of adding svg image in the html document with img, iframe elements - HTMLIf...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
So simple. Thanks.
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: