What Is It?

CSS2SVG is a JavaScript-based utility for converting CSS3 Gradients to SVG images to help maintain a website's appearance in browsers that do not support CSS3 gradients but do support SVG graphics (such as Internet Explorer 9).

The script is pure JS and does not require any libraries (though you could certainly fork a version that does if you want). It is also presented in a single HTML page for easy usage and editing.

Try It!

Basic Usage Instructions

1. For offline usage, download CSS2SVG.htm from the file listing above; that's the only file you need!
2. Copy and paste any gradients into the input box at the top of the script page. linear-gradient and now repeating-linear-gradient (new in Version 1.5.0) are supported, with or without prefixes.
3. If you're converting many gradients, then you may want to mark the "Clear Input on Focus" checkbox to expedite pasting/typing new gradients.
4. Declare a size. Typically for tiled background images, a percentage is best because it will stretch to fill the element's background. However, if you know the gradient is to fill the background of an element with a specific size, you can leave it as pixel-based dimensions. For accurate rendering of angles, pixels are recommended.
5. Click "Convert".
6. Copy and paste the SVG output into any plain text editor and save it as an .svg file.
7. That's all you have to do! You'll also see that the "Preview" section takes the same code in your output and inserts an actual SVG file into the page for you to see how the image will look. If you're not satisfied with the appearance, or you just want to change it, then edit the output and click "Update" to refresh the preview. Please note the browser compatibility list; older browsers may not support the SVG preview/editing functionality.

Gradient Test Cases

Check out some sample gradients to work with to demonstrate the script's functionality.

Advanced Usage Techniques

Check out advanced usage documentation here.

How the Script Works

Check out the embedded comments in the script for further explanations of the steps it carries out. In short, the script

1. parses input gradient(s) to separate angles or origin/destination keywords and individual color stops;
2. calculates SVG vector coordinates based on the angles or keywords;
3. generates color stops with your specified colors and offsets (or calculates missing offsets);
4. and finally builds an SVG file with the complete gradient(s).

JSFiddle

If you want to contribute to this project, then we recommend you play around with the code in the JSFiddle or offline, and when you know your changes work, then commit them here to GitHub. The converter is intentionally presented as a single HTML page with all the CSS and scripting in it, so, if you want to download it for editing or offline use, you can be assured you have ALL the necessary code. From JSFiddle, you should open the "full screen result" of your fiddling (URL available under the "Share" button), and when you look at the source code, make sure you are viewing it for the IFRAME in which the result is shown (you may need to right+click > show only this frame). JSFiddle also adds a dummy script and CSS link to the top of the document which do not need to be included in the git commit and please change the title of the document:

<title> - jsFiddle demo</title>
<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

Release Notes

Current Browser Support

• Full Support: Chrome 7+, IE9+, FF4+, Safari 5.1+, Opera 11.6+
• SVG Preview/Editing Unavailable: Chrome 6-, IE8-, FF3.6-, Safari 5.0-, Opera 11.5-

Overview of major changes, done by Anthony Martinez:

Version 1.5.4 (August 14, 2013)

1. Bug fix: Following the 1.5.3 update, gradients with any explicitly defined color-stops other than calc expressions were rarely if at all converting properly.

Version 1.5.3 (July 17, 2013)

1. Added support for CSS calc() expressions, e.g. calc(100% - 75px), as gradient stop values. Nested calc() expressions are not supported, however.
2. Bug fix / improvement in error-handling: The script's color validation check was not always throwing an error when it should do so.

Version 1.5.2 (July 2, 2013)

1. Bug fix: Use of ID selectors in Batch Mode would sometimes cause the script to improperly throw an error message.

Version 1.5.1 (June 23, 2013)

1. Bug fix: Logic for calculating repeating-linear-gradient color-stops was not being triggered properly.
2. Bug fix: Error message was being thrown unnecessarily for gradients with no angle or origin/destination keywords defined.

Version 1.5.0 (June 23, 2013)

1. Significantly improved gradient stops calculation. Now, any gradient with any number of missing stops should get converted properly.
2. Added support for absolute units in gradient color-stops: you may now use px, cm, mm, in, pt, and pc.
3. Added experimental support for repeating-linear-gradient. The script produces output with correct angles (arguably the most important part); however, eagle-eyed observers will notice discrepancies from CSS rendering—this is especially the case when the first color stop is not equal to zero. Future updates may correct such discrepancies if possible.
4. Bug fix: Due to the way the script previously handled missing color-stops, some gradients with at least three stops, where the initial color-stop(s) is/are defined and the last two left off, were not rendering properly.
5. Bug fix: A temporary div variable used in converting color names to hex was not being cleaned up properly after execution, leading to accumulation of unneeded divs in the page DOM with multiple conversions.
6. Bug fix: Gradients with no angle or origin/destination keywords defined, with a color name at the first color-stop would not convert properly when the first color-stop is explicitly labeled (e.g., linear-gradient(transparent 0%, ...) were not working).
7. Bug fix / improvement in error-handling: hsl/a colors with hues >360 degrees were not converting to the proper color.
8. Bug fix / improvement in error-handling: The script was silently allowing hex colors not in proper three- or six-digit notation, instead of throwing an error in the color validation check.
9. Added further enhancements to the page's usability. Now, you can perform a conversion or update by pressing shift+enter inside the input/output textareas, or pressing enter when the radio buttons, checkboxes, or dimension inputs have focus.
10. Despite the significant updates as listed above, the page code is now about 5% smaller compared to Version 1.2.0, thanks to various micro-optimizations.

See Full Changelog Here

Known Issues

1. Still no radial-gradient support yet, but Anthony plans to figure that out eventually!
2. —Fixed in 1.2.0— For some reason, FF3.6 and below (and Opera 10 and below) can only do one conversion per page load/refresh. Those browsers are ancient, though. So, any fixes for them will be of lowest priority for us, but you're welcome to contribute a fix! This issue is odd, though. Even IE7 can do multiple conversions! Heck, so can IE6!
3. —Fixed in 0.9.6— Older browsers that don't fully support rgba or hsl/a will trip on the included color validation loop, if input gradient(s) has/have rgba and/or hsl/a.

Road Map

Anthony intends to continue updating this script as time allows. Here's what he plans to implement (subject to change):

Version 2.X

1. Radial gradient support.

Version 3.X

1. canvas output support, to facilitate converting SVG output into bitmap images (e.g., PNG) that IE8- and other ancient browsers lacking SVG support can read.
2. (Maybe?) A tabbed interface to group the SVG code output, data URI output, canvas output, and SVG preview into one central location.

Acknowledgments

Original Project Page: http://www.kmhcreative.com/labs/css3-2-svg/

I’m not very good with math so I would never have been able to figure out how to build this without the following:

http://stackoverflow.com/questions/5287954/how-to-calculate-svg-linear-gradient-attribute-x1-y1-x2-y2-if-we-know-angle

http://stackoverflow.com/questions/5027950/coordinates-for-my-javascript-game-based-on-an-angle-when-do-i-use-sin-cos-and

http://www.codeproject.com/KB/books/learnsvgchapter07.aspx

HUGE thanks to Anthony Martinez for his additions to this! http://www.linkedin.com/in/canthonymartinez/

License

The script is licensed under a Creative Commons Attribution-ShareAlike 3.0 license.