Shutterstock has very strict submission requirements for vectors that make it hard to use free software, for example, "no bitmaps" - saving gradients in Inkscape, for example, results in the bitmap problem. (Reference)

My ideal tool would be free (e.g. Not Illustrator) or low cost, and available on Mac, Linux, and windows if possible, although Android /iOS tablets seems reasonable too if it has standard vector features.

In other words: I am looking for a free (or not-so-expensive) alternative to Adobe Illustrator, which is able to export real vectors in a format that is compatible with Adobe Illustrator 10… including vector gradients-fills and co. Please note that Inkscape is not a valid alternative as it does not support the correct export of gradients-fills. Instead, Inkscape works around the problem by embedding a bitmap of the gradient, which is what I need to prevent to be able to upload my vector files to Shutterstock.

  • I have no experience with these kind of things, but you might find this website useful: labri.fr/perso/barla/blog/?page_id=251 - apparently it has tools coded by a researcher in vector graphics and the Patate Library seems to include a vector gradient tool
    – Michiel
    Feb 11 '14 at 8:36
  • 3
    Given all the features the Inkscape has the practical way would be helping with adding vectorized export of gradients to Inkscape. Apr 15 '14 at 8:10
  • 1
    Try using interpolate ( inkscape.org/doc/interpolate/tutorial-interpolate.en.html ) feature of Inkscape to create vector-gradients. I'll make it an answer if it suits your needs.
    – VicAche
    May 17 '14 at 21:18

Google provides SVG-edit which can be used online from just about any platform.

  • Free
  • Cross Platform
  • You can get pure SVG without bitmaps, (unless you add them yourself), even gradients:

e.g. Rect with Gradient

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">!
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
  <radialGradient id="svg_2" spreadMethod="pad">
   <stop stop-color="#FF0000" offset="0"/>
   <stop stop-color="#00ffff" offset="1"/>
  <radialGradient spreadMethod="pad" id="svg_3">
   <stop offset="0" stop-color="#FF0000"/>
   <stop offset="1" stop-color="#00ffff"/>
  <title>Layer 1</title>
  <rect fill="url(#svg_2)" stroke="#000000" stroke-width="5" x="159" y="93" width="251" height="112" id="svg_1"/>
  • 1
    Thanks! This saved my butt on a project! Mar 9 '16 at 22:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.