Векторный редактор онлайн: 8 лучших бесплатных браузерных альтернатив adobe illustrator

Bluegiffon


Bluegiffon is an open source WYSIWYG editor for Windows which is also a good free SVG editor. Basically if you want to edit and add a SVG file in your content, you can do it directly through Bluegiffon. You do not need to open your SVG file in another SVG editor separately and then add it to your content.

When you run this software, a text editor is opened. Click on the SVG Edit icon on the toolbar to open the SVG Editor window. You can create a new file or import an existing one. This is not primarily an SVG editor, but has sufficient editing tools to perform modifications. The tools include: Free Hand Tool, Objects, Shapes, Color Picker, Fill Color, Insert Image, Text, etc. Grids are also available on this freeware to edit SVG.

After editing, insert the SVG file to text editor by using “Save Image to Bluegiffon”. The edited file is saved in .html format, but not in .svg. You can view the source of the edited design in html by clicking the Source button on the bottom of the interface. The file can be previewed in print or browser mode.

Paint.net

Paint.net is a famous photo editor which you can use to edit SVG files. It does not natively supports SVG files, but you can use a plugin to open and edit SVG files.

Download ImSVG plugin, and extract the files. After extracting the files, you have to copy the files to the Paint.net folder. This small Tutorial to open SVG files in Paint.net will help you with where to copy the files.

Paint.net has got a bunch of image editing tools which can be used to modify and edit SVG files. Use the Layers option, and various other tools to apply rich effects, such as: Magic Wand, Pan, Gradient, Paint Brush, Pencil, Clone Stamp, and many more. More editing tools include: auto-level, curve, invert color, etc.

Although you can open and edit SVG files, you can not export them as SVG after editing. The output formats are: .pdn, .bmp, .png, .jpeg, .tiff, .dds, etc.

Трансформации и 2D пространство

Трансформации в 2D пространстве зависят от X и Y координат на X / Y осях, как вы могли заметить на изображении с голубым прямоугольником, выше. 

  • Ось является горизонтальной линией в 2D пространстве, а ось соответственно вертикальная линия. По умолчанию каждая фигура начинается на позиции равной на обеих осях координат и .
  • Начиная от позиции по оси, положительные значения соответствуют движению вправо, негативные значения соответствуют движению влево.
  • Начиная от позиции на оси , положительные значения соответствую движению вниз, негативные значению соответствуют движению вверх.

Если на данный момент это не совсем понятно, не волнуйтесь, со временем, когда вы ознакомитесь с примерами, ситуация прояснится.

Также не стоит беспокоиться о коде трансформации, так как мы разберём это при создании анимации. Для начала я хочу объяснить основы пяти типов трансформации и что они делают.

Translate

Данный вид трансформации передвигает фигуру относительно X оси (горизонтальная ось) и относительно Y оси (вертикальная ось).

К примеру вот наш голубой прямоугольник со значениями по оси (горизонтальная ось) и по оси (вертикальная ось):

Помните мы обсуждали до этого, что положительные значение позиции на оси отвечают за движение вправо и что положительные значение позиции отвечают за движение вниз.

Установив значение для равное , наш прямоугольник сдвинулся вправо на 150 пикселей. Задав значение равное тем самым мы сдвинули прямоугольник вниз на 20 пикселей.

Scale

Этот вид трансформации увеличивает размер согласно оси X (ширина) и согласно оси Y (высота).

Значения Scale увеличивают оригинальный размер фигуры. К примеру если мы зададим значение scale равное фигура станет в три раза шире. Если задать значение scale равное фигура станет на четверть выше, выглядеть это будет так: 

Также установлено значение translate(150, 20)

Rotate

Данный вид трансформации вращает фигуру вокруг, согласно указанным градусам.

Ротация работает относительно значению градусов, тем самым вращая фигуру. К примеру, ротация прямоугольника на 45 градусов:

Также установлено значение translate(150, 20)


По умолчанию фигура будет вращаться относительно верхнего левого угла, но вы также можете вращать её относительно другой точки. Мы рассмотрим как это сделать позже, в данном туториале.

SkewX

Данная трансформация искажает фигуру относительно X оси (горизонтальная).

Искажение относительно оси X также измеряется в градусах. К примеру прямоугольник на изображении ниже искажён на 20 градусов относительно X оси:

Также установлено значение translate(150, 20)

SkewY

Эта трансформация искажает фигуру относительно Y (вертикально) оси согласно заданному значение градусов.

работает точно также как и , единственное отличие, что трансформация выполняется вертикально согласно оси Y:

Также установлено значение translate(150, 20)

Installation

Quick install

  1. Clone or copy the repository contents (at least the directory). Please note that you should not do a recursive Git clone (i.e., with the or flags), as you will get assorted past versions (which are available on the parent as branches anyways). (The reason these past versions are available as submodules is merely for convenience in hosting these versions, along with , online on Github Pages.)
  2. If you need programmatic customization, see its section below.
  3. Otherwise, just add an iframe to your site, adding any extensions or configuration (see ({@tutorial ConfigOptions})) within the URL:
<iframe src="svgedit/src/editor/svg-editor.html?extensions="
    width="100%" height="100%"></iframe>

Note that if you want support for the following browsers, you will at least need some polyfills.

For Android Browser 4.4.3-4.4.4, you will need at least .

For the following, you will need at least , , and :

  • IE <= 11
  • IE Mobile
  • Opera Mini
  • Blackberry Browser <= 10

And for still older browsers (e.g., IE 8), you will at minimum need a polyfill.

Integrating SVG-edit into your own npm package

These steps are only needed if you wish to set up your own npm package incorporating SVGEdit. You will need to have Node.js/npm installed.

  1. Create and enter an empty folder somewhere on your desktop.
  2. Create your npm package: (complete the fields).
  3. Install SVG-edit into your package: .
  4. Look within , e.g., for the files your package needs and use accordingly (from outside of ).
  5. If you want to publish your own work, you can use .

Adobe Illustrator – An SVG editor for Windows/Mac

The world’s most famous SVG editor, Adobe Illustrator has a large market share in the global vector editing software industry. With its powerful features and user-friendly interface, it’s hardly surprising. According to statistics, 37% of designers worldwide use Adobe Illustrator.

This SVG tool is mainly used in printing and publishing, poster book layout, professional illustration, multimedia image processing, and internet page production. It also provides high precision and control for line drafts. Whether you’re working on a small design project or a large, complex one, Adobe Illustration will do the job.

Xara Designer Pro

$299 – available for Windows, Mac, iPad and tablet

Xara Designer Pro is an SVG editor that offers you an integrated tool with text handling, drawing tools, page layout and a blending tool, as well as creative effects, bevels, contours transparency and feathering.

Using Xara, you’ll be able to easily adjust the transparency of your vectors, and gradient fills in a quick and efficient way. Just like in tools such as Sketch and Illustrator, you can avail of the simple drag and drop feature to import SVG files into the tool to edit.

Furthermore, Xara offers second-to-none object manipulation, letting you move, resize and rotate objects instead of dragging the outlines as you draw – even on complex vectors. What we particularly like is the ability to perform unlimited undos, giving you an unshackled creative freedom to experiment.

It’s also a brilliant tool to use if your priority is collaboration. You can also give clients access from anywhere in the world and let team members work on designs remotely!

Comments and Discussions

You must Sign In to use this message board.
First Prev Next
Member 10409748 1-Jan-20 14:39 
gandhichintan 18-Apr-17 8:55 
Ajay Britto 19-May-17 17:25 
gandhichintan 28-Jan-18 23:11 
manirajus 3-Jun-16 4:09 
bsculley 4-May-16 7:06 
Ajay Britto 19-May-17 17:27 
bsculley 4-May-16 7:04 
pauljayhoon 12-Apr-12 14:37 
Manoj Kumar Choubey 20-Feb-12 19:25 
Bharat Mane 17-May-11 19:46 
Anubhava Dimri 3-Aug-10 2:50 
Ajay Britto 4-Aug-10 2:48 
Anubhava Dimri 30-Jul-10 20:25 
Ajay Britto 31-Jul-10 0:29 
Anubhava Dimri 31-Jul-10 0:43 
Anubhava Dimri 24-Jul-10 1:24 
Ajay Britto 30-Jul-10 18:46 
Sacha Barber 13-Apr-10 20:27 
Ajay Britto 14-Apr-10 21:41 

General    News    Suggestion    Question    Bug    Answer    Joke    Praise    Rant    Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Recent news

  • 2019-11-16 Published 5.1.0 Misc. fixes and refactoring
  • 2019-05-07 Published 5.0.0 Change from
  • 2019-04-03 Published 4.3.0 Fix for double click on gradient picker droplets affecting some browsers and dragging control point of arc. Other misc. fixes. Some accessibility and i18n.
  • 2018-12-13 Published 4.2.0 (Chinese (simplified) and Russian locale updates; retaining lines with grid mode)
  • 2018-11-29 Published 4.1.0 (Fix for hyphenated locales, svgcanvas distributions)
  • 2018-11-16 Published 4.0.0/4.0.1 (Move to Promise-based APIs)
  • 2018-11-01 Published 3.2.0 (Update qunit to resolve security vulnerability of a dependency)
  • 2018-10-25 Published 3.1.1 (Fix for saving SVG on Firefox)
  • 2018-10-24 Published 3.1.0 (Redirect on modular page for non-module-support; versions document (for migrating))
  • 2018-10-22 Published 3.0.1 (Revert fix affecting polygon selection)
  • 2018-10-21 Published 3.0.0 (misc. improvements including centering canvas and key locale fixes since last RC)
  • 2018-09-30 Published 3.0.0-rc.3 with security and other fixes
  • 2018-07-31 Published 3.0.0-rc.2 with misc. fixes
  • 2018-07-19 Published 3.0.0-rc.1 allowing for extensions and locales to be expressed as modules
  • 2018-05-26 Published 3.0.0-alpha.2 with ES6 Modules support
  • 2015-12-02 SVG-edit 2.8.1 was released.
  • 2015-11-24 SVG-edit 2.8 was released.
  • 2014-04-17 2.7 and stable branches updated to reflect 2.7.1 important bug fixes for the embedded editor.
  • 2014-04-07 SVG-edit 2.7 was released.
  • 2013-01-15 SVG-edit 2.6 was released.

ES6 Modules file

  1. is an HTML file directly using ES6 modules. It is only supported in the latest browsers. It is probably mostly useful for debugging, as it requires more network requests. If you would like to work with this file, you should make configuration changes in (in the SVG-Edit project root).
  2. If you are working with the ES6 Modules config but also wish to work with the normal version (so your code can work in older browsers or get the presumable performance benefits of this file which references JavaScript rolled up into a single file), you can follow these steps after any config changes you make, so that your changes can also be automatically made available to both versions.
    1. JavaScript:
      1. Run within the svgedit directory ( if you installed via npm) and the root repository directory if you cloned the Git repository instead. This will install the build tools for SVG-edit.
      2. Run within the svgedit directory mentioned in the step above.
        1. This will rebuild (applying Babel to allow it to work on older browsers and applying Rollup to build all JavaScript into one file). The file will then contain non-ES6 module JavaScript that can work in older browsers. Note that it bundles all of SVGEdit, so it is to be expected that this file will be much larger in size than the original ES6 config file.
    2. HTML:
      1. If you wish to make changes to both HTML files, it is recommended that you work and test on and then run to have the changes properly copied to .

Vectr

Vectr is a good choice for both beginners and more advanced SVG users. Its interface is neat and it doesn’t overwhelm with a gazillion tools you never use. This is great for newcomers to vector illustration because you shouldn’t feel lost among tools you have no idea what to use for. It comes with some tutorials as well, so even if you are a total stranger to SVG, you should still be able to start using it quickly.

This doesn’t mean Vectr lacks features – it has all the basic stuff, such as shapes, text, layers, shadows, borders, backgrounds, etc. you need to create a basic image. It doesn’t have the glory of a full-fledged desktop editor but for some quick designs and edits, it more than suffices. You can either start a new file from scratch or upload an existing image.

Be aware that you might get frustrated when uploading complex illustrations to Vectr – for instance, maps or detailed diagrams – as we’ve found it doesn’t always handle them well. But for simpler SVGs – icons, logos and the like – it’s mostly fine.

If you feel the Web version doesn’t offer what you need, you can find more features in the desktop version of the the appwhich is available for Windows, Mac, Linux, and Chromebook.


Perhaps the single coolest features Vectr offers is the ability to link and embed your Vectr graphic directly from the Vectr site – this effectively becomes a hosting service for your SVG. As many services block the upload of SVG files this is a fairly big deal. It means you could display your Vectr SVG artwork on an external WordPress, Medium, Tumblr or other sites that allows display of SVG but blocks upload SVG to their servers.

Vectr also offers the ability to share your Vector graphic within a Vectr editor panel, allowing others to edit the graphic you supply to them. This mean you could, for instance, you could provide an SVG logo in a template design that users could then customize to their own requirements – live in the browser.

To this end, Vectr have recently released a version of the product as a WordPress plugin for Vectr.

Basic Idea

  1. SVG is plaintext image format
  2. SVG-Edit is JavaScript SVG editor
  3. DokuWiki is great for collaboration and versioning on top of textfiles
  4. Why we are not using DokuWiki to take care about our images

I had created this proof of concept version and I am copylefting whole source and I hope that community will improve this plugin

I am using DokuWiki to taking notes in school and I was missing simple way to add sketches, graphs and mathematical formulas. So I’ve installed math2, graphviz, but still there was nothing really usable to create sketches, so I’ve decided to write my own plugin.

At the beginning, I’ve found cool software called svg-edit (you can try demo) which can edit SVG images directly in browser using JavaScript. And I’ve got idea to embed SVG-edit to DokuWiki WYSIWYG and store svg files same way as other documents, so everybody will be able to collaborate on single SVG file even with using diffs and any other cool DokuWiki stuff.

Background

For one of my commercial projects, I was required to draw a vector image, which in a way represents the data I have and allows users to manipulate the vector image, and then the data needed to be updated accordingly. It was a WinForms application so I didn’t have the option of using XAML over there (neither data templates :)). So then I searched over Google and found SVG Paint. I had to spend considerable effort on the curve of learning the project, then customizing and implementing it. As I mentioned, some levels of customization were required to fit my requirements and I am carrying it through to the project which is uploaded here.

The challenges I faced were to bring interactivity to the objects based on user actions or data, and to manipulate the graphics frequently based on UI design feedbacks. I had to spend a considerable amount of time and effort on perfecting the approach I used, but I should say that the end result was very satisfactory.

My project got completed and I wanted to perfect the tools and techniques used in the due course. But now that I have shifted myself to WPF, I would say my creativity has got a stronger platform on the positive side. I had to rewrite SVG Artiste to render as XAML instead of WinForms GDI. But I feel it is worthwhile sharing the idea here as the core challenges still remain the same for any vector editor.

Recent news

  • 2020-02-22 Published 6.0.0 License clarifications/updates, PDF export improvements, clipboard , and other changes.
  • 2019-11-16 Published 5.1.0 Misc. fixes and refactoring
  • 2019-05-07 Published 5.0.0 Change from
  • 2019-04-03 Published 4.3.0 Fix for double click on gradient picker droplets affecting some browsers and dragging control point of arc. Other misc. fixes. Some accessibility and i18n.
  • 2018-12-13 Published 4.2.0 (Chinese (simplified) and Russian locale updates; retaining lines with grid mode)
  • 2018-11-29 Published 4.1.0 (Fix for hyphenated locales, svgcanvas distributions)
  • 2018-11-16 Published 4.0.0/4.0.1 (Move to Promise-based APIs)
  • 2018-11-01 Published 3.2.0 (Update qunit to resolve security vulnerability of a dependency)
  • 2018-10-25 Published 3.1.1 (Fix for saving SVG on Firefox)
  • 2018-10-24 Published 3.1.0 (Redirect on modular page for non-module-support; versions document (for migrating))
  • 2018-10-22 Published 3.0.1 (Revert fix affecting polygon selection)
  • 2018-10-21 Published 3.0.0 (misc. improvements including centering canvas and key locale fixes since last RC)
  • 2018-09-30 Published 3.0.0-rc.3 with security and other fixes
  • 2018-07-31 Published 3.0.0-rc.2 with misc. fixes
  • 2018-07-19 Published 3.0.0-rc.1 allowing for extensions and locales to be expressed as modules
  • 2018-05-26 Published 3.0.0-alpha.2 with ES6 Modules support
  • 2017-07 Added to Packagist: https://packagist.org/packages/svg-edit/svgedit
  • 2015-12-02 SVG-edit 2.8.1 was released.
  • 2015-11-24 SVG-edit 2.8 was released.
  • 2015-11-24 Code, issue tracking, and docs are being moved to github (previously code.google.com).
  • 2014-04-17 2.7 and stable branches updated to reflect 2.7.1 important bug fixes for the embedded editor.
  • 2014-04-07 SVG-edit 2.7 was released.
  • 2013-01-15 SVG-edit 2.6 was released.

Syntax and Usage

If you want to see how awesome it is, look here: https://www.youtube.com/watch?v=M-QW6a1ZFHA (the video is from the beta version. It works better now.) The biggest problem with this plugin is that it needs a modern browser. At this time it works best with WebKit-based browsers (Chromium, Chrome, Safari and Epiphany).

Create new image or embed existing.

Usage:

  • embed svg using do=export_svg (recommended)
    {{svg>page.svg}}
    {{svg>namespace:page.svg}}
  • base64 encode svg directly (requires or &purge every time SVG changes)
    {{SVG>page.svg}}
    {{SVG>namespace:page.svg}}
  • base64 encode inline svg directly (originaly for internal use, but have fun if you like it…)
    <svg args...>...code...</svg>

now you can also embed SVG directly to the page like this, but it’s only by-product and editing of such images will not be supported:

<svg width="100" height="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <ellipse ry="34" rx="31" stroke-width="5" stroke="#000000" fill="#ff0000" id="svg_2" cy="55" cx="63"/>
  <rect stroke-width="5" stroke="#000000" fill="#000080" id="svg_1" height="39" width="45" y="11" x="12"/>
 </g>
</svg>

Recent news

  • 2020-02-22 Published 6.0.0 License clarifications/updates, PDF export improvements, clipboard , and other changes.
  • 2019-11-16 Published 5.1.0 Misc. fixes and refactoring
  • 2019-05-07 Published 5.0.0 Change from
  • 2019-04-03 Published 4.3.0 Fix for double click on gradient picker droplets affecting some browsers and dragging control point of arc. Other misc. fixes. Some accessibility and i18n.
  • 2018-12-13 Published 4.2.0 (Chinese (simplified) and Russian locale updates; retaining lines with grid mode)
  • 2018-11-29 Published 4.1.0 (Fix for hyphenated locales, svgcanvas distributions)
  • 2018-11-16 Published 4.0.0/4.0.1 (Move to Promise-based APIs)
  • 2018-11-01 Published 3.2.0 (Update qunit to resolve security vulnerability of a dependency)
  • 2018-10-25 Published 3.1.1 (Fix for saving SVG on Firefox)
  • 2018-10-24 Published 3.1.0 (Redirect on modular page for non-module-support; versions document (for migrating))
  • 2018-10-22 Published 3.0.1 (Revert fix affecting polygon selection)
  • 2018-10-21 Published 3.0.0 (misc. improvements including centering canvas and key locale fixes since last RC)
  • 2018-09-30 Published 3.0.0-rc.3 with security and other fixes
  • 2018-07-31 Published 3.0.0-rc.2 with misc. fixes
  • 2018-07-19 Published 3.0.0-rc.1 allowing for extensions and locales to be expressed as modules
  • 2018-05-26 Published 3.0.0-alpha.2 with ES6 Modules support
  • 2017-07 Added to Packagist: https://packagist.org/packages/svg-edit/svgedit
  • 2015-12-02 SVG-edit 2.8.1 was released.
  • 2015-11-24 SVG-edit 2.8 was released.
  • 2015-11-24 Code, issue tracking, and docs are being moved to github (previously code.google.com).
  • 2014-04-17 2.7 and stable branches updated to reflect 2.7.1 important bug fixes for the embedded editor.
  • 2014-04-07 SVG-edit 2.7 was released.
  • 2013-01-15 SVG-edit 2.6 was released.

Конвертеры SVG в PNG

Просмотреть файл SVG как обычную картинку можно просто перетащив его на окно браузера, но бывает и так, что SVG-документ необходимо сконвертировать в более доступный и привычный графический формат, скажем, PNG. Если конвертируемых файлов много, есть смысл воспользоваться бесплатной тулзой SVG2PNG, позволяющей преобразовывать SVG в PNG в пакетном режиме. Чтобы конвертировать SVG в PNG, запустите утилиту, перетащите в ее окно векторные файлы, нажмите «Start» и получите результат.

В остальных случаях будет меньше мороки, если воспользуетесь бесплатными конвертерами SVG в PNG, работающими в режиме онлайн. В частности, это svgtopng.com/ru, convertio.co/ru/svg-png и image.online-convert.com/ru/convert-to-png.

Какой из них удобнее, решайте сами. Все эти три конвертера бесплатны и поддерживают работу в пакетном режиме, а Online-Convert вдобавок ко всему еще предоставляет возможность гибкой настройки выходных параметров PNG-файла.

Introducing Core Components

Let me explain each of the above mentioned briefly here.

1. Toolbar

The Toolbar provides the users a choice to select a tool. No twists here. Coming to the implementation, all tools are derived from the base class .

  public abstract class Tool 
 {
    #region Fields
                public Boolean IsComplete;
    #endregion Fields
    #region Methods
                        public virtual void OnMouseDown(DrawArea drawArea, MouseEventArgs e)
    {
    }

                        public virtual void OnMouseMove(DrawArea drawArea, MouseEventArgs e)
    {
    }

                        public virtual void OnMouseUp(DrawArea drawArea, MouseEventArgs e)
    {
    }

    public virtual void ToolActionCompleted()
    {
    }
    #endregion Methods
}

The derived classes, obviously, are expected to implement the features presented. For example, if we are dealing with a rectangle tool, a mouse down should mark the starting points of the rectangle, a mouse move should track the resizing of the intermediary stages of the rectangle, and a mouseup should create the final rectangle with the starting point and ending point as per user selection. You can refer to any of the tools implementation to get the full feel of it. It really is a very simple implementation which is used here, trust me. Adding a new tool is just a piece of cake once you get a feel of it.

2. Properties

I have probably overly simplified the job in hand by making use of the properties grid provided by the .NET framework. Since each of the shapes onscreen are typical objects as in OOP, simply assigning them to the property grid does the trick. If multiple items are selected, only the common properties are shown. SVG Artiste also follows the same religion. Another approach is to use a custom property control for each graphic element, which will give better intuitiveness to the application, but of course, at the price of more effort.

3. WorkArea

WorkArea is a place which holds WorkSpaces. A WorkArea is basically a tabbed view as provided by the dockable toolbar kit. To a WorkArea, we will add WorkSpace(s).

4. WorkSpace

This is the place where the drawings are done. Here I have done a two step approach. The workspace resides inside a WorkSpaceHolder (both being user controls). I have followed the below approach for two simple reasons:

  • To allow scrolling
  • To add in the ruler control

The WorkSpace holds the control, whose jobs are:

  • Render the shapes on screen
  • Take user inputs (depending on the tool selected)
  • Hold the current state of the graphic (I am referring to the graphic list)

5. ControlBox

This is the place where the various aspects of the WorkSpace can be controlled. Presently there are three of them.

  • Zoom
  • Grid
  • Height/Width and Description of SVG Document

Concepts

Vector Graphics — It is an indispensable part of any visual presentation which will be scaled unpredictably. Raster will lose its quality, vectors won’t. Each vector is represented by its co-ordinates and each graphics is a group of basic vector elements. Examples of vector elements can be circle, rectangle etc.

SVG — It is a standard brought forward by Adobe. Now Microsoft is also joining the community, which shows its strength. SVG is an extension of XML, so it is bound to be platform independent. is in Linux, Windows or Mac. SVG Artiste 2.0 uses SVG as a method of serialization and transportation of graphics created out of it.

Editors — A typical graphical editor would have a toolbar, a drawing area, and other visual objects that help edit the graphic on screen. So for vectors, it has got to be tools that help edit each element on the drawing area.


Vectors with Apps — When it comes to presenting the vector graphics in an application, present it as a drawing in a control which is capable of reading (and probably writing) them and converting them to the form in which the application can understand and represent them as pixel points on the display system.

RollApp

Unlike the other tools on the list, when you go to RollApp’s homepage, you don’t see the tool right away. The reason is that RollApp isn’t a single app, it’s a package of apps and their SVG editor is just one of these apps. It’s a great tool, though, because this is a browser-based version of Inkscape.

If you want to use RollApp, you need an account. You can either register a new account or login with Google, Facebook, Amazon – very handy because I really hate it to create thousands of new accounts just to see the app I am registering for isn’t what I need.

After you login, you will see the following:

Yep, it’s Inkscape in all its glory! No doubt, RollApp is the most feature-rich app on this list – you are practically using Inkscape in your browser! I didn’t compare it item by item but it looks very much they have ALL the features of Inkscape, such as layers, objects, text, path, filters, effects, extensions, etc.

Be aware that with larger files, it’s not too fast because you are performing the actions on their servers over the Internet. In short, if you want to edit large and complex stuff, RollApp might not be ideal, but for any other task beyond basic edits, this may the best Web-based editor out there.

Векторный логотип имеет много вариантов для экспорта

При работе в векторных программах, таких как Illustrator, вы можете легко экспортировать один векторный логотип в любой векторный или растровый формат по мере необходимости.

Просто нажмите Shift + Control + S, чтобы вызвать меню Сохранить как; оттуда вы можете сохранить документ Illustrator в различных векторных форматах (AI, EPS, PDF и SVG).

Эти форматы идеальны при экспорте окончательного варианта логотипа или при отправке фирменного знака в разных расширениях клиентам.

Если вы хотите отправить наброски вашего логотипа или других элементов дизайна, вы можете экспортировать его в растровом формате.

Многие клиенты не имеют доступа к векторному программному обеспечению и не могут самостоятельно создавать векторные файлы.

Векторные логотипы могут быть сохранены как в растровом, так и в векторном форматах, в отличие от их растрового аналога.

В Illustrator откройте параметры экспорта, выбрав «Файл»> «Экспорт»> «Экспортировать как». В раскрывающемся списке «Формат» вы можете выбрать PNG, JPG или TIFF.

Эти три формата доступны повсеместно и часто сохраняют большую часть качества при конвертации.

Inkscape – A Free SVG editor for Windows/Mac

Inkscape is a very popular SVG editor that is free to use. It is cross-platform compatible, making it an ideal choice for illustrators, graphic designers, and web designers. It has powerful object creation and manipulation features such as pencil tools, stroke tools, rectangles, polygons, and more.

This tool is mainly used to construct and optimise vector graphics in the form of charts, logos, illustrations, charts, and even multiple images. It is known for its comprehensive SVG support. Additionally, Inkscape supports a range of output formats including PNG, OpenDocument, DXF, PDF, EPS, sk1, and more.

Draw SVG

Free – available online

Just as the name suggests, Draw SVG lets you draw your own vectors. It also includes extra tools that let you optimize your vectors, converting them to different file types and allowing you to share them with your team.

Drawing SVG is perfect for whatever kind of content you need to create – from graphic designs for UIs to infographics for blog post content. It also provides a graphic community where you can ask questions, browse, share and publish your drawings.

A further plus is that the onboarding is quick – this SVG editor provides a learning center which helps you get quickly up to speed with the tool. Another handy feature is that it lets you easily encode your images, meaning you can obtain both the relevant HTML code and CSS styles to pass on to your developers!


С этим читают