Every tool, explained. Filter the topics on the left, or search from the bar above.

Vector Studio

Vector Studio

Overview

Vector Studio is a full SVG editor that runs entirely in your browser. Draw shapes, combine them with boolean operations, set type in any of 120 open-licence fonts, fill anything with a photo, then export a clean vector file or a sharp PNG. Drawing, editing and exporting are free and need no account — only the AI features cost tokens, and cloud saves need a plan.

Your work is kept in this browser between visits, so closing the tab does not lose it. New document (File menu) is what starts fresh.

How to use

  1. Open Vector Studio from the sidebar.
  2. Pick a tool from the left rail — or start from Library ▸ Templates, an icon, or an illustration.
  3. Drag on the canvas to draw. Press S at any time to go back to the Select tool.
  4. Click a shape to select it, then use the Design panel on the right to set its fill, stroke, size and position.
  5. Add wording with the Text tool, and choose a typeface from Text ▸ Fonts….
  6. Export from the Export button: SVG for a vector file, PNG for a sharp 2× raster.

The workspace

  • Menu bar — File, Edit, Object, Path, Text, View, Library and Help, in the way a desktop editor arranges them.
  • Tool options bar — changes with what you are doing: the active tool's hint while drawing, and position, size, rotation and arrange controls once something is selected.
  • Left rail — the drawing tools.
  • Right dock — three tabs: Design (the selection's properties), Library (icons, illustrations, templates, stock photos) and AI. The Code button beside them opens the SVG source in its own window.
  • Palette strip — click a swatch for fill, Shift-click for stroke. It scrolls sideways; a normal mouse wheel works on it.
  • Status bar — active layer, a live hint, pointer coordinates and zoom.

Focus mode (the arrows in the tool options bar, or View ▸ Focus mode) hands the whole window to the editor and hides the Waripixel sidebar and header. Esc brings them back.

Drawing tools

  • Select (S) — click a shape, drag a box around several, or Shift-click to add one to the selection.
  • Node (N) — edit a shape point by point. See below.
  • Eyedropper — click any shape to copy its fill and stroke onto the swatches. It switches off after one pick.
  • Pen (P) — click to place points, drag for curves, double-click to finish.
  • Pencil (D) — freehand.
  • Line (L), Rectangle (R), Ellipse (E) — drag to draw; hold Shift for a square, a circle or a snapped angle.
  • Polygon and Star — dropped straight onto the canvas.
  • Text (T) and Arch text — see below.
  • Grid (G) and Fit to screen.

Text and fonts

The studio ships 120 open-licence Google Fonts — a spread across sans, condensed, serif, display, script and monospace, about half of them with a live weight axis.

  1. Select a text object, or pick the Text tool, then open Text ▸ Fonts… (or the font button in the Design panel).
  2. Search by name, or filter by Sans, Serif, Display, Script or Mono.
  3. Every family in the list is previewed in itself, so you choose a typeface by looking at it.
  4. Click a family to apply it. With a text object selected it restyles that text; with nothing selected it sets the font for the next text you draw.
  5. Set Size and Weight in the same panel — a slider for families with a live weight axis, and the actual cuts for families that ship fixed weights.
  6. Type into Your text and press Add this text to the canvas to drop it straight in.

Alignment (left, centre, right) sits in the Design panel's Text section, next to size and weight.

Each family's licence and copyright notice is shown under the preview. They are all SIL Open Font License or Apache 2.0.

Fonts survive an export. The typeface is embedded in the file you download, so a PNG renders in the font you chose and an exported SVG opens correctly on a machine that has never had that font installed.

Arch text curves wording along a circle. Add it from the left rail or Text ▸ Add arch text, then change the wording and the Curve radius in the Design panel. Drag it like any other object.

Photos inside shapes

Any shape can be filled with a photo — Image… for your own file, or Stock… for a Pexels or Unsplash search. The photo is cropped to cover the shape.

There are two things inside a filled shape, and the Image inside section decides which one a drag moves:

  • Both together — the ordinary case. The shape and the photo travel as one.
  • Just the image — the shape holds still and the photo slides underneath it. Use this to reframe a photo without moving its frame.
  • Just the shape — the photo holds still on the canvas and the shape slides across it, revealing a different part. Use this to position a window over a picture.

Right-clicking a filled shape offers the same three.

Zoom the photo past 100% first. At 100% the photo fills the shape exactly, so there is no slack and neither of them can move. The Zoom and Rotate sliders in the same section set the framing, and Reset the framing puts it back. The photo can never be dragged so far that a gap or a repeat shows.

Pexels and Unsplash do not allow their photos to be re-shared unchanged, so an export whose every visible element is a stock photo is blocked. Add your own shapes or text first.

Editing paths and nodes

  • Object to Path (Path menu, or right-click) rewrites a rectangle, ellipse or line as the path that draws it, so its points can be edited.
  • Node (N) opens a shape for point editing. Click a point to select it, Shift-click for several, drag to move. The tool options bar becomes a node toolbar: add a node, delete a node, join the ends into a closed outline, break it open, and straighten or bend a segment.
  • Escape or Done leaves node editing.
  • Combine (⌘K) welds several outlines into one path; Break apart (⇧⌘K) splits a multi-part outline back into separate shapes.
  • Union, Subtract, Intersect and Exclude need exactly two selected shapes.

Arranging and aligning

  • Align — six buttons in the Design panel's Transform section. One shape aligns to the page; two or more align to each other.
  • Distribute — with three or more shapes selected, spaces them out so the gaps are equal. The outermost two stay exactly where they are.
  • Raise to front, Move to middle, Lower to back.
  • Group (⌘G) binds shapes into one object; Ungroup (⇧⌘G) takes a group apart — including a library icon, which is how you get at its shapes to paint them one by one.
  • Lock ratio keeps proportions while resizing, both from the W/H boxes and from the corner handles.

The right-click menu

Right-clicking on the canvas selects whatever is under the pointer and brings the common commands to it: duplicate, delete, group and ungroup, Object to Path, raise and lower, distribute, the two-subjects choice for an image fill, lock ratio, zoom and fit to screen. Items that cannot apply to the current selection are shown greyed rather than hidden, so the menu always reads the same way.

The SVG source window

The Code button beside the dock tabs opens the drawing as SVG markup in a floating window you can drag by its title bar and resize from its corner. It remembers where you left it.

Edit the markup and press Apply to canvas — anything active (scripts, event handlers, remote references) is stripped on the way back in. Revert restores the current drawing, and Copy puts the markup on the clipboard. The window is deliberately not modal, so you can watch the canvas react while you edit.

Exporting

  • SVG — a clean vector file, cropped to your artwork.
  • PNG — a sharp 2× raster.
  • Selection as SVG / PNG — one object on its own, cropped to itself. Several loose shapes need grouping first (⌘G), because nothing else says where one ends and the next begins.
  • Use in Mockup sends the design to Batch Logo.

Exports crop to the drawing rather than the artboard, so nothing you drew outside the page is ever lost.

Tips

  • Type what you need into the Find box under the canvas — "bezier", "scissors", "opacity", "fonts" — and it runs the tool and tells you where it lives.
  • The Canvas button sets the working space: a white artboard that grows with your art, a borderless unlimited surface, or a fixed size like A4 or a business card.
  • Ungroup a library icon to recolour its shapes individually. Artwork lines in the Design panel changes an icon's line weight in real screen pixels, not the icon's own grid.
  • Cloud saves need an account and a save slot; without one, your work still persists in this browser.
  • Keyboard: S select, R rectangle, E ellipse, L line, D pencil, P pen, T text, N nodes, G grid, ⌘Z undo, ⌫ delete.

Aperçu

Vector Studio est un éditeur SVG complet qui fonctionne entièrement dans votre navigateur. Dessinez des formes, combinez-les avec des opérations booléennes, composez du texte dans 120 polices sous licence libre, remplissez n'importe quelle forme avec une photo, puis exportez un fichier vectoriel propre ou un PNG net. Dessiner, modifier et exporter est gratuit et ne demande aucun compte — seules les fonctions IA coûtent des jetons, et les sauvegardes cloud demandent un forfait.

Votre travail est conservé dans ce navigateur d'une visite à l'autre : fermer l'onglet ne le perd pas. C'est Nouveau document (menu Fichier) qui repart de zéro.

Comment l'utiliser

  1. Ouvrez Vector Studio dans la barre latérale.
  2. Choisissez un outil dans le rail de gauche — ou partez d'un modèle, d'une icône ou d'une illustration dans l'onglet Bibliothèque.
  3. Faites glisser sur le canevas pour dessiner. Appuyez sur S à tout moment pour revenir à l'outil Sélection.
  4. Cliquez sur une forme pour la sélectionner, puis réglez son fond, son contour, sa taille et sa position dans le panneau Design à droite.
  5. Ajoutez du texte avec l'outil Texte, et choisissez une typographie dans Texte ▸ Polices….
  6. Exportez depuis le bouton Export : SVG pour un fichier vectoriel, PNG pour un rendu 2× net.

L'espace de travail

  • Barre de menus — Fichier, Édition, Objet, Tracé, Texte, Affichage, Bibliothèque et Aide, rangés comme dans un éditeur de bureau.
  • Barre d'options — elle suit ce que vous faites : le conseil de l'outil actif pendant le dessin, puis position, taille, rotation et ordre dès qu'un objet est sélectionné.
  • Rail de gauche — les outils de dessin.
  • Panneau de droite — trois onglets : Design (les propriétés de la sélection), Bibliothèque (icônes, illustrations, modèles, photos) et IA. Le bouton Code à côté ouvre le source SVG dans sa propre fenêtre.
  • Bande de couleurs — un clic pour le fond, Maj-clic pour le contour. Elle défile latéralement, à la molette.
  • Barre d'état — calque actif, conseil en direct, coordonnées du pointeur et zoom.

Le mode focus (les flèches dans la barre d'options, ou Affichage ▸ Mode focus) donne toute la fenêtre à l'éditeur et masque la barre latérale et l'en-tête de Waripixel. Échap les fait revenir.

Outils de dessin

  • Sélection (S) — cliquez une forme, encadrez-en plusieurs, ou Maj-clic pour en ajouter une à la sélection.
  • Nœud (N) — modifier une forme point par point. Voir plus bas.
  • Pipette — cliquez une forme pour copier son fond et son contour sur les pastilles. Elle se désactive après une prise.
  • Plume (P) — cliquez pour poser des points, glissez pour des courbes, double-cliquez pour terminer.
  • Crayon (D) — à main levée.
  • Ligne (L), Rectangle (R), Ellipse (E) — glissez pour dessiner ; Maj donne un carré, un cercle ou un angle contraint.
  • Polygone et Étoile — déposés directement sur le canevas.
  • Texte (T) et Texte en arche — voir plus bas.
  • Grille (G) et Ajuster à l'écran.

Texte et polices

Le studio embarque 120 Google Fonts sous licence libre — un éventail de sans serif, condensées, serif, display, scriptes et monospace, dont environ la moitié avec un axe de graisse continu.

  1. Sélectionnez un texte, ou prenez l'outil Texte, puis ouvrez Texte ▸ Polices… (ou le bouton de police dans le panneau Design).
  2. Cherchez par nom, ou filtrez par Sans, Serif, Display, Script ou Mono.
  3. Chaque famille de la liste est prévisualisée dans sa propre police : on choisit une typographie en la regardant.
  4. Cliquez une famille pour l'appliquer. Avec un texte sélectionné, elle le restyle ; sans sélection, elle définit la police du prochain texte.
  5. Réglez Taille et Graisse au même endroit — un curseur pour les familles à axe continu, et les coupes réelles pour celles livrées en graisses fixes.
  6. Saisissez votre texte dans Votre texte et cliquez sur Ajouter ce texte au canevas pour le déposer directement.

L'alignement (gauche, centre, droite) se trouve dans la section Texte du panneau Design, à côté de la taille et de la graisse.

La licence et la mention de copyright de chaque famille s'affichent sous l'aperçu. Toutes sont en SIL Open Font License ou Apache 2.0.

Les polices survivent à l'export. La typographie est intégrée au fichier téléchargé : un PNG s'affiche dans la police choisie, et un SVG exporté s'ouvre correctement sur une machine qui n'a jamais eu cette police.

Le texte en arche courbe les mots le long d'un cercle. Ajoutez-le depuis le rail de gauche ou Texte ▸ Ajouter un texte en arche, puis modifiez les mots et le rayon de la Courbe dans le panneau Design. Il se déplace comme n'importe quel objet.

Photos à l'intérieur des formes

Toute forme peut être remplie d'une photo — Image… pour votre fichier, Stock… pour une recherche Pexels ou Unsplash. La photo est recadrée pour couvrir la forme.

Une forme remplie contient deux choses, et la section Image à l'intérieur décide laquelle un glissement déplace :

  • Les deux ensemble — le cas ordinaire. La forme et la photo se déplacent d'un bloc.
  • L'image seule — la forme reste immobile et la photo glisse dessous. Pour recadrer une photo sans bouger son cadre.
  • La forme seule — la photo reste immobile sur le canevas et la forme glisse par-dessus, révélant une autre partie. Pour placer une fenêtre sur une image.

Un clic droit sur la forme propose les mêmes trois modes.

Zoomez d'abord la photo au-delà de 100 %. À 100 % la photo remplit exactement la forme : il n'y a aucun jeu, et ni l'une ni l'autre ne peut bouger. Les curseurs Zoom et Rotation de la même section règlent le cadrage, et Réinitialiser le cadrage le remet à zéro. La photo ne peut jamais être glissée assez loin pour laisser apparaître un vide ou une répétition.

Pexels et Unsplash interdisent le repartage de leurs photos telles quelles : un export dont tous les éléments visibles sont une photo de stock est donc bloqué. Ajoutez d'abord vos propres formes ou votre texte.

Tracés et nœuds

  • Objet en tracé (menu Tracé, ou clic droit) réécrit un rectangle, une ellipse ou une ligne comme le tracé qui le dessine, pour pouvoir en modifier les points.
  • Nœud (N) ouvre une forme pour l'édition par points. Cliquez un point pour le sélectionner, Maj-clic pour plusieurs, glissez pour déplacer. La barre d'options devient une barre de nœuds : ajouter, supprimer, joindre les extrémités en un contour fermé, l'ouvrir, et redresser ou courber un segment.
  • Échap ou Terminé quitte l'édition de nœuds.
  • Combiner (⌘K) soude plusieurs contours en un seul tracé ; Séparer (⇧⌘K) redécoupe un contour multiple en formes distinctes.
  • Union, Soustraction, Intersection et Exclusion demandent exactement deux formes sélectionnées.

Disposer et aligner

  • Aligner — six boutons dans la section Transformation du panneau Design. Une seule forme s'aligne sur la page ; deux ou plus s'alignent entre elles.
  • Répartir — avec trois formes ou plus sélectionnées, les espace pour que les écarts soient identiques. Les deux formes extrêmes ne bougent pas.
  • Premier plan, Au milieu, Arrière-plan.
  • Grouper (⌘G) lie les formes en un objet ; Dégrouper (⇧⌘G) ouvre un groupe — y compris une icône de la bibliothèque, ce qui permet d'en peindre les formes une par une.
  • Verrouiller les proportions conserve le rapport pendant un redimensionnement, depuis les champs L/H comme depuis les poignées.

Le menu contextuel

Un clic droit sur le canevas sélectionne ce qui se trouve sous le pointeur et lui apporte les commandes courantes : dupliquer, supprimer, grouper et dégrouper, Objet en tracé, ordre, répartition, le choix des deux sujets pour un remplissage image, verrouillage des proportions, zoom et ajustement à l'écran. Les entrées qui ne s'appliquent pas à la sélection sont grisées plutôt que masquées, pour que le menu se lise toujours de la même façon.

La fenêtre du source SVG

Le bouton Code, à côté des onglets du panneau, ouvre le dessin sous forme de balisage SVG dans une fenêtre flottante que vous déplacez par sa barre de titre et redimensionnez par son coin. Elle se souvient de l'endroit où vous l'avez laissée.

Modifiez le balisage puis cliquez sur Appliquer au canevas — tout ce qui est actif (scripts, gestionnaires d'événements, références distantes) est retiré au passage. Rétablir recharge le dessin actuel, et Copier met le balisage dans le presse-papiers. La fenêtre n'est volontairement pas modale : vous voyez le canevas réagir pendant que vous éditez.

Exporter

  • SVG — un fichier vectoriel propre, recadré sur votre dessin.
  • PNG — un rendu 2× net.
  • Sélection en SVG / PNG — un objet seul, recadré sur lui-même. Plusieurs formes libres doivent d'abord être groupées (⌘G), sans quoi rien n'indique où l'une s'arrête et où la suivante commence.
  • Utiliser dans Mockup envoie le dessin vers Batch Logo.

Les exports se recadrent sur le dessin et non sur le plan de travail : rien de ce que vous avez dessiné en dehors de la page n'est perdu.

Astuces

  • Tapez ce que vous cherchez dans le champ Find sous le canevas — « bezier », « scissors », « opacity », « fonts » — il lance l'outil et vous dit où il se trouve.
  • Le bouton Canvas règle l'espace de travail : un plan de travail blanc qui grandit avec votre dessin, une surface illimitée sans bordure, ou une taille fixe comme A4 ou une carte de visite.
  • Dégroupez une icône de la bibliothèque pour en recolorer les formes séparément. Traits du dessin dans le panneau Design change l'épaisseur des traits d'une icône en pixels écran réels, pas dans la grille interne de l'icône.
  • Les sauvegardes cloud demandent un compte et un emplacement ; sans cela, votre travail reste malgré tout conservé dans ce navigateur.
  • Clavier : S sélection, R rectangle, E ellipse, L ligne, D crayon, P plume, T texte, N nœuds, G grille, ⌘Z annuler, ⌫ supprimer.