https://github.com/softberry/imgsvg

https://github.com/softberry/imgsvg

css image svg vector-graphics

Last synced: 24 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/softberry/imgsvg
• Owner: softberry
• Created: 2018-01-31T19:29:04.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-06T17:17:09.000Z (almost 7 years ago)
• Last Synced: 2024-11-20T23:17:22.573Z (about 1 month ago)
• Topics: css, image, svg, vector-graphics
• Language: JavaScript
• Size: 9.17 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


# imgsvg

[![imgsvg](https://img.shields.io/npm/v/imgsvg.svg?style=for-the-badge)]()

[![npm](https://img.shields.io/npm/l/imgsvg.svg?style=for-the-badge)]()

[![GitHub last commit](https://img.shields.io/github/last-commit/softberry/imgsvg.svg?style=for-the-badge)]()

Get in contact for help from developer:

[![Get help on Codementor](https://cdn.codementor.io/badges/get_help_github.svg)](https://www.codementor.io/emresakarya?utm_source=github&utm_medium=button&utm_term=emresakarya&utm_campaign=github)

include svg images simply in ```` tag and give it data attribute ``data-imgsvg``. 

All those elements will be replaced with  ````  vector graphics. 

## Why imgsvg

**CSS** can animate and style ``svg`` files but they should not be included in ``img`` . 

With this small utility, you can now include ``svg`` images in ``img`` tags but still can use advantages of **css** .

If you place an image like this : 

```` 

it will be converted into :

	

		

	

## Advantages

- Place your vector graphics in simpler form but keep using the advantages of nativ behavior of **svg**. 

- Content Management Systems usually let editors to add images always in ```` tags. This is not a pitfall anymore. 

## How to use it:

Download minified snipped from ``dist/imgsvg.min.js`` and serve it with your other files. And simply add in to you ``html`` files.

**PS** Images must  have ``data-imgsvg`` attribute and file suffix must be ``.svg`` .

		**Sample HTML Page**

        

	

	    

		    

			    

				    Sample page img2svg