https://github.com/anacierdem/svg-wrapper
A polymer web component to wrap SVGs
https://github.com/anacierdem/svg-wrapper
draw optimization performance polymer-element polymer2 reflow render style svg webcomponents
Last synced: 4 months ago
JSON representation
A polymer web component to wrap SVGs
- Host: GitHub
- URL: https://github.com/anacierdem/svg-wrapper
- Owner: anacierdem
- License: mit
- Created: 2017-12-15T20:07:00.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-15T13:33:16.000Z (over 8 years ago)
- Last Synced: 2026-01-23T19:56:52.256Z (5 months ago)
- Topics: draw, optimization, performance, polymer-element, polymer2, reflow, render, style, svg, webcomponents
- Language: HTML
- Homepage:
- Size: 14.6 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svg-wrapper element
You can wrap your SVGs if it contains style tags just by replacing them with svg-style.
Alternatively provide the svg-data property as a string with actual SVG data. You can also
bind to this property but the textContent inside the element is not bindable.
Setting `pre-render` property will draw the SVG onto a canvas to prevent any further SVG draw operations to improve performance.
If you provide a unique reference property, consequent wrappers with same reference will display the same image with same size, without re-drawing anything.
When using `pre-render`;
The element will trigger `renderCompleted` when the SVG is successfully drawn.
The element will trigger `renderStart` when the SVG has started drawing.
These two events are expected to trigger with equal amounts if no errors occur, so you can keep track of waiting and rendered SVGs.
## Installation
bower install svg-wrapper
## Usage
[These will not affect current scope's style] ...
... '>
[These will not affect current scope's style] ...
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D
### Trying out the element
First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve this element locally.
## Credits
Ali Naci Erdem
https://alinacierdem.com
Support me at http://patreon.com/anacierdem