13

Ask DN: Good svg design tool?

over 5 years ago from , Associate Product Design Director @ Huge

Anyone know of a good tool for designing/editing svg specifically for web.

Illustrator is pretty good, but you have to work pretty hard to get it to snap to round pixel values, export clean svg code, etc...

23 comments

  • Alexander Adam, over 5 years ago

    What about Gravit? (https://www.gravit.io). Works in the web, creates for the web ;-) It has pixel snapping and good general support for clean and crips graphics. Easy export to SVG. The svg is already very efficient (i.e. most filters if possible are converted to native svg filters etc. etc.). It can (almost) perfectly import SVG too. The svg support is also improved every week to make it even more efficient without any bloat (i.e. native shapes + default attributes coming next). As I have personally been in the W3C SVG Working Group years ago working on the standard I am having a pretty good influence that the svg export is becoming pretty good ;)

    5 points
    • Pablo Petzen, over 5 years ago

      Gravit has fit all my needs of a vector editor and the best it is everywhere, Linux, Mac and Windows! 100% enjoyed it.

      3 points
    • Vlad Danilov, over 5 years ago

      You need to make it less online. Save to Dropbox (or your own cloud-based folders), an app for syncing fonts, offline mode, or an electron-based app. Also, hiding the editor behind a sign-up form is a bit off-putting, it can be offered along the way.

      2 points
      • Alexander Adam, over 5 years ago

        Not sure -- It already loads and saves into our own cloud based folders? Offline version (synching etc.) is currently in planning, its not really easy because we want / will implement visual merging if there're multiple changes and such. You think its bad hiding the editor behind a signup? Because every other web-app (MarvelApp, InvisionApp, etc.) are doing the same..

        Thanks for your input!

        2 points
        • Vlad Danilov, over 5 years ago (edited over 5 years ago )

          Not sure -- It already loads and saves into our own cloud based folders?

          I meant Dropbox-like local folders. I think everyone would like to keep a local copy of their documents. But the real benefit is streamline development. Other tools you mentioned can get away with it because they serve as mere guidelines.

          The real workflow is: design multiple artboards with constanlty updating master documents, external data, symbols, libraries, slice designs, import documents into prototyping tools, generate/prepare style guides, generate/prepare handoffs for developers, export image assets at multiple resolutions, use gulp/grunt/IDE build system to transorm/convert/optimize/inline images, create sprite sheets, icons, etc, iterate and version all these.

          You think its bad hiding the editor behind a signup? Because every other web-app (MarvelApp, InvisionApp, etc.) are doing the same..

          You position yourself as free forever. Forced signup contradicts this a bit. Those apps you mentioned are commercial-first and also pretty popular to not bother with improving accessibility. Plus all of them are showcasing their editors (and big companies using it) on main pages.

          Offline version (synching etc.) is currently in planning, its not really easy because we want / will implement visual merging if there're multiple changes and such.

          That's a great feature to have. Versioning is currently terribly broken for design documents.

          0 points
    • Dan CoatesDan Coates, over 5 years ago

      Looks like your CDN's TLS cert expired a few hours ago. I'm just getting a blank page.

      0 points
      • Alexander Adam, over 5 years ago

        Yes the worst thing that can happen while one is asleep. It is fixed now sorry for that. First time we ever had a downtime because of forgetting to renew the SSL Certificate :(

        0 points
  • Jonathan SimcoeJonathan Simcoe, over 5 years ago

    Figma

    4 points
  • Jason EtcovitchJason Etcovitch, over 5 years ago

    In Illustrator, if you go to File>Export to save out your SVG it actually gives great code and can minify it if you want.

    1 point
    • Pete Sadler, over 5 years ago

      With Illustrator you can just select>copy the vector and paste into a text editor.

      7 points
      • Matt CoadyMatt Coady, over 5 years ago

        Woah, didn't know you could just paste the code, that's amazing!

        1 point
      • Jason EtcovitchJason Etcovitch, over 5 years ago

        When you do that, you're also copying a bunch of garbage code that Illustrator throws in (like empty tags, comments or links to Adobe's SVG plugin thing). Exporting it gives much cleaner code that's ready to be used.

        1 point
    • Todd Padwick, over 5 years ago

      In theory its good... but Ive always found that illustrators SVG code exporter is quite buggy... when resizing the artboard, it messes with the SVG viewbox code. so that when you then upload svgs to fontello for example, they end up being positioned incorrectly.

      1 point
  • Michael Wandelmaier, over 5 years ago

    Awesome - thanks all! I think I'll give gravit & affinity a shot (I can manually clean-up svg code, but would rather not have to if there's a visual editor that can get me 90% of the way there).

    1 point
  • Geoff RogersGeoff Rogers, over 5 years ago

    Years ago when I used it on Linux, Inkscape was truly excellent.

    Seriously, one of the nicest pieces of open source software I have used. A joy compared with GIMP and others. It is designed as an SVG editor and wasn't 'cluttered' up with features that the format doesn't support. It's not native on OS X (or Win, I expect).

    I use Affinity Designer on OS X now. It's pretty great and does have decent SVG support. (Now. Previous versions would export as a raster graphic embedded in a vector format for SVG or EPS!)

    1 point
  • Sandy Yeh, over 5 years ago

    How about the Iconmoon ? a chrome extension.

    0 points
  • Mehgan Y, over 5 years ago (edited over 5 years ago )

    Have you tried Vectr ( https://vectr.com/)? It's a free online vector graphics editor - also available on Mac, Windows, Linux, and Chromebook. Super simple and easy-to-use, yet powerful enough to handle all your design needs.

    0 points
  • Vasil EnchevVasil Enchev, over 5 years ago

    http://protosketch.io/

    0 points
  • Mark ProganoMark Progano, over 5 years ago

    Affinity Designer all day, just make sure you have the "more" settings you want it, depending if you embed or link resources :)

    0 points
  • AK SelbyAK Selby, over 5 years ago

    I typically copy/paste from AI for prototypes. Pasting into a text editor reveals the whole SVG block. However I'm more adept at design and am only beginning to branch out into development so I'm sure the other options are much better. I just find this approach to be sufficient for my internal prototyping needs.

    0 points
  • Zak ErvingZak Erving, over 5 years ago

    I've found all of my complaints/woes with AI were squashed with Affinity Designer. Although its SVG export isn't as streamlined as, say, Sketch, it's still better than AI and when coupled with a Grunt/Gulp optimizer it gets my stamp of approval :) Hope this helps!

    0 points