| Name | streamlit-svg-view JSON |
| Version |
0.2.0
JSON |
| download |
| home_page | None |
| Summary | A Streamlit custom component for displaying SVG animations with interactive play, pause, and restart controls |
| upload_time | 2025-09-07 03:38:06 |
| maintainer | None |
| docs_url | None |
| author | None |
| requires_python | >=3.9 |
| license | MIT |
| keywords |
animation
component
interactive
streamlit
svg
|
| VCS |
 |
| bugtrack_url |
|
| requirements |
No requirements were recorded.
|
| Travis-CI |
No Travis.
|
| coveralls test coverage |
No coveralls.
|
# Streamlit SVG View
A Streamlit custom component for displaying SVG animations with interactive play, pause, and restart controls.
## Features
- Interactive Controls - Play, pause, and restart SVG animations with hover overlay controls
- Customizable Colors - Set custom colors for control buttons to match your app's theme
- Responsive Design - Works seamlessly across different screen sizes
- Cross-browser Compatible - Supports all modern browsers with graceful fallbacks
- Lightweight - Minimal dependencies and optimized performance
- Easy Integration - Simple API that works with any animated SVG
## Installation
```bash
pip install streamlit-svg-view
```
## Quick Start
```python
import streamlit as st
from streamlit_svg_view import svg_view
# Your animated SVG content
svg_content = '''
<svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="50" fill="blue">
<animate attributeName="r" values="50;80;50" dur="2s" repeatCount="indefinite"/>
<animate attributeName="fill" values="blue;red;blue" dur="2s" repeatCount="indefinite"/>
</circle>
</svg>
'''
# Display with controls
result = svg_view(svg_content, width=250, height=250)
st.write("Animation state:", result)
```
## API Reference
### svg_view(svg_content, width=None, height=None, play_color=None, pause_color=None, restart_color=None, key=None)
#### Parameters
- **svg_content** (str): The SVG content as a string
- **width** (int, optional): Component width in pixels (default: 400)
- **height** (int, optional): Component height in pixels (default: 300)
- **play_color** (str, optional): Color for the play button (CSS format)
- **pause_color** (str, optional): Color for the pause button (CSS format)
- **restart_color** (str, optional): Color for the restart button (CSS format)
- **key** (str, optional): Unique key for the component instance
#### Returns
**dict**: Component state containing:
- is_playing (bool): Whether animations are currently playing
- action (str): Last user action ('play', 'pause', 'restart', or 'state_change')
## Examples
### Basic Usage
```python
import streamlit as st
from streamlit_svg_view import svg_view
# Simple pulsing circle
svg = '''
<svg width="100" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="20" fill="blue">
<animate attributeName="r" values="20;30;20" dur="1s" repeatCount="indefinite"/>
</circle>
</svg>
'''
svg_view(svg)
```
### Custom Colors
```python
# Match your app's color scheme
svg_view(
svg_content,
play_color="#ff6b6b", # Coral red
pause_color="#4ecdc4", # Turquoise
restart_color="#45b7d1", # Sky blue
width=300,
height=200
)
```
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
Raw data
{
"_id": null,
"home_page": null,
"name": "streamlit-svg-view",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.9",
"maintainer_email": null,
"keywords": "animation, component, interactive, streamlit, svg",
"author": null,
"author_email": "Isaac Vidas <isaac@vid.as>",
"download_url": "https://files.pythonhosted.org/packages/8c/a7/1767ad3dc5bfb680677f2ab16d8336a9ab39beb8bcb38c0aaa98c7e26d1d/streamlit_svg_view-0.2.0.tar.gz",
"platform": null,
"description": "# Streamlit SVG View\n\nA Streamlit custom component for displaying SVG animations with interactive play, pause, and restart controls.\n\n## Features\n\n- Interactive Controls - Play, pause, and restart SVG animations with hover overlay controls\n- Customizable Colors - Set custom colors for control buttons to match your app's theme \n- Responsive Design - Works seamlessly across different screen sizes\n- Cross-browser Compatible - Supports all modern browsers with graceful fallbacks\n- Lightweight - Minimal dependencies and optimized performance\n- Easy Integration - Simple API that works with any animated SVG\n\n## Installation\n\n```bash\npip install streamlit-svg-view\n```\n\n## Quick Start\n\n```python\nimport streamlit as st\nfrom streamlit_svg_view import svg_view\n\n# Your animated SVG content\nsvg_content = '''\n<svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\">\n <circle cx=\"100\" cy=\"100\" r=\"50\" fill=\"blue\">\n <animate attributeName=\"r\" values=\"50;80;50\" dur=\"2s\" repeatCount=\"indefinite\"/>\n <animate attributeName=\"fill\" values=\"blue;red;blue\" dur=\"2s\" repeatCount=\"indefinite\"/>\n </circle>\n</svg>\n'''\n\n# Display with controls\nresult = svg_view(svg_content, width=250, height=250)\nst.write(\"Animation state:\", result)\n```\n\n## API Reference\n\n### svg_view(svg_content, width=None, height=None, play_color=None, pause_color=None, restart_color=None, key=None)\n\n#### Parameters\n\n- **svg_content** (str): The SVG content as a string\n- **width** (int, optional): Component width in pixels (default: 400)\n- **height** (int, optional): Component height in pixels (default: 300)\n- **play_color** (str, optional): Color for the play button (CSS format)\n- **pause_color** (str, optional): Color for the pause button (CSS format)\n- **restart_color** (str, optional): Color for the restart button (CSS format)\n- **key** (str, optional): Unique key for the component instance\n\n#### Returns\n\n**dict**: Component state containing:\n- is_playing (bool): Whether animations are currently playing\n- action (str): Last user action ('play', 'pause', 'restart', or 'state_change')\n\n## Examples\n\n### Basic Usage\n\n```python\nimport streamlit as st\nfrom streamlit_svg_view import svg_view\n\n# Simple pulsing circle\nsvg = '''\n<svg width=\"100\" height=\"100\" viewBox=\"0 0 100 100\">\n <circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"blue\">\n <animate attributeName=\"r\" values=\"20;30;20\" dur=\"1s\" repeatCount=\"indefinite\"/>\n </circle>\n</svg>\n'''\n\nsvg_view(svg)\n```\n\n### Custom Colors\n\n```python\n# Match your app's color scheme\nsvg_view(\n svg_content,\n play_color=\"#ff6b6b\", # Coral red\n pause_color=\"#4ecdc4\", # Turquoise \n restart_color=\"#45b7d1\", # Sky blue\n width=300,\n height=200\n)\n```\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.",
"bugtrack_url": null,
"license": "MIT",
"summary": "A Streamlit custom component for displaying SVG animations with interactive play, pause, and restart controls",
"version": "0.2.0",
"project_urls": {
"Documentation": "https://github.com/kazuar/streamlit-svg-view/blob/main/README.md",
"Homepage": "https://github.com/kazuar/streamlit-svg-view",
"Issues": "https://github.com/kazuar/streamlit-svg-view/issues",
"Repository": "https://github.com/kazuar/streamlit-svg-view"
},
"split_keywords": [
"animation",
" component",
" interactive",
" streamlit",
" svg"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "9c0d40d2c517c61e465e8b9068c2332e9f105eb31cac67a4df504f88ccc3c341",
"md5": "122dc9d532558d2faafd4c37084a5ec3",
"sha256": "9945c6b42bd3f5cfbc29924927a895c75257625078dd43d815e3c688845ca1fa"
},
"downloads": -1,
"filename": "streamlit_svg_view-0.2.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "122dc9d532558d2faafd4c37084a5ec3",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.9",
"size": 5016,
"upload_time": "2025-09-07T03:38:05",
"upload_time_iso_8601": "2025-09-07T03:38:05.508374Z",
"url": "https://files.pythonhosted.org/packages/9c/0d/40d2c517c61e465e8b9068c2332e9f105eb31cac67a4df504f88ccc3c341/streamlit_svg_view-0.2.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "8ca71767ad3dc5bfb680677f2ab16d8336a9ab39beb8bcb38c0aaa98c7e26d1d",
"md5": "174b592fb62d1916133968d2ea8af634",
"sha256": "2d27dec0f8480bd101f8b2a667d99bfc43f05f5d2f05454836483d0058ae9523"
},
"downloads": -1,
"filename": "streamlit_svg_view-0.2.0.tar.gz",
"has_sig": false,
"md5_digest": "174b592fb62d1916133968d2ea8af634",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.9",
"size": 4387,
"upload_time": "2025-09-07T03:38:06",
"upload_time_iso_8601": "2025-09-07T03:38:06.690707Z",
"url": "https://files.pythonhosted.org/packages/8c/a7/1767ad3dc5bfb680677f2ab16d8336a9ab39beb8bcb38c0aaa98c7e26d1d/streamlit_svg_view-0.2.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-09-07 03:38:06",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "kazuar",
"github_project": "streamlit-svg-view",
"travis_ci": false,
"coveralls": false,
"github_actions": false,
"lcname": "streamlit-svg-view"
}
