SVG is gaining popularity in web design these days and you can use tools like Illustrator or Inkscape to create SVG graphics. But when it comes to web design, we should always optimize for lighter results.
Here the 20 tools that you can use to work with SVG quickly and efficiently. We have mostly online tools, that can help in optimization, conversion, making patterns, and more.
How To Create SVG Animation Using CSS
Animating SVG can be done through native elements such as <animate> and <animateMotion>. But for those who are… Read more
Interactive SVG Coordinate System
When you work with SVG you can’t leave its coordinate. This is a great interactive tool by Sara Souiden, to help you learn how SVG coordinates work. Using the viewBox and preserveAspectRatio on SVG, guided by orange and purple lines and a handy ruler, you can play while learning how SVG coordinates function.
b64
b64 is a simple tool to optimize images then turn them into the base64 format. You can drop your SVG images (other formats such as JPG and PNG work too) then grab the CSS with base64 background-image as the result.
SVGO
SVG that is exported may contain unnecessary information which can be removed without affecting the rendering result. If you want to remove editor metadata, comments or hidden elements, you can use SVGO.
You can intall SVGO via npm, $ [sudo] npm install -g svgo or use the GUI version that offers drag and drop to proccess your SVG optimation.
SVG OMG
SVG OMG turns the command line of SVGO (the previous tool) into a GUI version that more intuitive and easy to use. Just toggle the buttons to activate or deactivate each feature. In the end you can grab the result as image files and code as well.
SVG Now
When you work on Illustrator, the exported SVG contains some information that is not neccessary. With this tool you will get the optimized version of your exported SVG right from your Illustrator workspace. This tool adds a panel with some options to optimize SVG.
SVG to PNG converter
Want to export SVG files to PNG form? Without opening applications like Illustrator to do so? Use this SVG to PNG Converter tool to get image outputs in PNG format and also PNG Base64 data URI if you need it.
SVG Circus
If you think loader animations are cool, now you can create it easily by utilizing SVG with SVG Circus. The tools enables you to make your own loader, spinner, or anything similar using looped animation. Set the ‘Actor’, position, size, color and others from the panel, then export to get the results.
SVG Sprite
SVG Sprite is an Node.js module, which optimizes a bunch of SVG files, and bakes them into SVG sprite-types including traditional CSS sprites for background and/or foreground images, SVG stacks and more.
Quasi
With quasi you can generate Quasicrystal images like what you see below. This generator is experimental, but the results are definitely cool. You can play around by changing the options value, then download the results with the ‘Save SVG’ button.
Plain Pattern
Creating patterns with SVG has never been easier or more fun. Upload your image, scale down or change the spacing, rotate and recolor until you get a beautiful pattern. You can preview the result before downloading it.
Trianglify Generator
Create beautiful SVG geometric patterns with Trianglify Generator. You can set the color randomness / variant, granularity size, and choose a color palette to work with. This tool is a GUI version of Trianglify.
Export PSD to SVG
If you use Photoshop as the image editor for your work, sometimes you might need to convert your design on the Photoshop workspace into SVG, which is an unsupported format in Photoshop. Download the Script to this tool, then copy to the Adobe Photoshop/presets/scripts folder.
Rename a vector layer name with the SVG extension (e.g. layer1 become layer1.svg), and you can now run the script from File > Scripts > PS to SVG.
SVG Filters
Do you know that with SVG you are able to add effects such as with hue, saturation, blur, linear color overlay, and many others to images? Here is a tool that visualizes these effects, then gives you a snippet to make it easy to embed the effect into your project.
SVG Morpheous
SVG Morpheous is a JavaScript library that allows you to morph an SVG icon from one shape to another. You can set the easing effect, duration of transition animations, and also rotation direction.
Clip path generator
SVG allows you to click the image clip with Shape. This is quite easy if the shape is in the form of a square or a circle. But what if the shape is one with a lot of points or is a polygonal shape? That’s where you need this Clip Path Generator tool.
Chartist.js
Chartist.js is a library to create highly customizable responsive charts. It utilizes SVG to display the charts, which also can be animated using SMIL. With this library, you are able to create line chart, pie chart, bar chart and other types of charts, and even add animation to them.
SVG stroke dash generator
This is a simple tool to generate dashed lines utilizing SVG stroke-dasharray. First choose one dash type from the list, then customize it in terms of width, height, rotation or color. Afterwards you can grab the HTML code and CSS to apply this dash line in your project.
Method Draw: A Simple SVG Editor
Method Draw is a web-based SVG editor, with an intuitive interface that comes with tools on both sides of the canvas. You can draw lines, shapes, input text or use built-in shapes, then edit the properties of the drawn objects. Export the image in SVG format (also comes in SVG base64 format) or save directly in PNG.
Export Flash to animated SVG
Although it is not very popular anymore, there is a chance that some of you have a hard time letting go of Flash. If so, you can turn your flash animation into SVG to keep it working compatibly with newer technologies. This tool forms an extension to the Flash application, and can work on CS5, CS6 and CC.
You can export into SVG when it comes to Shapes, Bitmaps Symbols, Classic Motion Tweens, Shape tweens (for others, there is arguable success).
The post 20 Free SVG Tools for Better Graphics (Updated) appeared first on Hongkiat.
from Irvine Business Signs https://ift.tt/2BLeJrf
via Irvine Sign Company
