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 or cut them with six boolean operations, set type in any of 120 open-licence fonts, bring in your own pictures or ones you have bought, crop them to any shape, 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 your own images) and AI. The Code button beside them opens the SVG source in its own window.
  • Zoom to selection — the magnifying glass at the end of the menu bar fills the screen with whatever is selected. Handy mid-edit, when you have just picked the thing you want to work on.
  • 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, along with two spacing controls:

  • Line spacing — the gap between lines, as a multiple of the type size, so it holds when you resize the text.
  • Letter spacing — the gap between characters, in canvas pixels. Negative values tighten it.

Text on the canvas can have more than one line. Double-click it to start typing and press Enter for a new line, exactly as you would anywhere else. Escape or a click elsewhere finishes.

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.

Putting a picture on the canvas

There are two ways to get a picture in, and they suit different jobs.

Import it as its own object when the picture is the thing you are placing. File ▸ Import image from this device…, or Library ▸ My images. It lands at its own size, and from there it behaves like any other object: resize it and it scales, set its opacity, tint it, or crop it to a shape.

Library ▸ My images holds both sources:

  • Upload from this device — your own file, from your computer or phone. No account needed.
  • Bought from Waripixel — everything you have bought from us. Sign in and they are all there; picking one places the full-resolution original you paid for, not the preview.

Fill a shape with it instead when the shape comes first — a photo poured into a circle, a headline, or a library icon. That is the section below.

The difference matters when you resize. An imported picture scales. A photo used as a fill is measured against its shape, so resizing the shape reframes the photo rather than scaling it.

Picture colour

With an imported picture selected, the Picture colour section grades it:

  • Saturation — 0% drains it to grey, 100% leaves it as shot, 200% pushes the colour hard.
  • Tint — a colour and a strength. The tint keeps the picture's light and shade and takes only its colour from the swatch, so it reads as a wash rather than a coat of paint.

Nothing is baked in. The original pixels are untouched underneath, and Back to the original colours removes the grading entirely.

Cropping a picture to a shape

Lay any shape over a picture, select both, and choose Object ▸ Crop to shape. The picture is cut down to that outline — a photo in a circle, a star, or any path you have drawn.

Nothing is thrown away: the shape moves into the file's definitions and Object ▸ Release crop hands it straight back. It works on an imported picture, on a shape filled with a photo, and on anything else you want to cut to an outline.

A picture gets one crop at a time, so a cropped picture cannot also take a corner radius — the crop is already doing that job. Release the crop first if you want rounded corners instead.

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.

Drag a side to bend it. In node editing you do not have to work point by point. Press anywhere along a side — the stretch of outline between two points — and pull, and that side bows to follow your pointer. The two points at its ends stay where they are, so the sides beside it are untouched. Grab it near one end and the bulge happens near that end. The side under your pointer is traced before you press, so you can see what you are about to grab.

Hold Shift while dragging a side to move the whole side instead, taking both its points with it. The sides either side of it stretch to keep up.

A straight side has no curve to move, so the first pull turns it into one. Make line in the node toolbar puts it back.

Double-click a side to put a point there. The side becomes two halves you can bend or drag on their own. The shape does not move — all that happens is a new point appears exactly where you clicked, and it is left selected so Make line and Make curve apply to it straight away. Pull the new point on a straight side and the outline folds into a corner; pull it on a curve and it stays smooth.

Double-clicking the edge of a rectangle, ellipse or star does this too, converting it to a path first — so it is also the quickest way into node editing. A double-click anywhere else keeps the meaning it always had.

Combining and cutting shapes

The Path menu holds six operations, named as Inkscape names them:

  • Union — merges the shapes into one.
  • Difference — cuts the shape on top out of the one below.
  • Intersection — keeps only where they overlap.
  • Exclusion — keeps everything except the overlap.
  • Division — cuts the shape below into separate filled pieces.
  • Cut path — cuts the outline below into separate open lines, with no fill.

Union, Intersection and Exclusion take any number of shapes. Difference, Division and Cut path have a subject and a knife, so they take exactly two — and they read stacking order, not the order you clicked: the one on top always does the cutting.

Cut path leaves open outlines, which a fill cannot show. The pieces take the original's line colour so they are still visible.

Rounded corners

The Rounded corners section of the Design panel appears whenever the selection has corners to round, and one slider covers three different things:

  • A rectangle keeps its own rounding, so it can be changed or undone at any time.
  • A picture is clipped to a rounded rectangle of its own size. Nothing is cut from the file itself.
  • Any other outline — a path, a polygon, a star — has each sharp corner cut back and bridged with an arc. Corners where curves already meet are left alone, since they are round already.

Rewriting an outline would normally be one-way, so the studio keeps the sharp version on the shape: sliding back to 0 restores it exactly, and moving the slider always re-rounds from the original rather than rounding what is already round. A radius too big for the shape quietly shrinks to what fits.

Rounding a polygon or a star turns it into a path first, the same as Object to Path does.

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.
  • The canvas scrolls on for ever. Scroll to the top or the bottom and another screenful of room opens up beyond it, so you can always push the page aside to work at its margin. Fit to screen puts the view back where it belongs.
  • Keyboard: S select, R rectangle, E ellipse, L line, D pencil, P pen, T text, N nodes, G grid, + zoom in, − zoom out, ⌘Z undo, ⌫ delete.
  • Zooming with + and − holds the middle of the view still, so whatever you were looking at stays under your eyes instead of sliding off the screen.

Aperçu

Vector Studio est un éditeur SVG complet qui fonctionne entièrement dans votre navigateur. Dessinez des formes, combinez-les ou découpez-les avec six opérations booléennes, composez du texte dans 120 polices sous licence libre, importez vos propres images ou celles que vous avez achetées, détourez-les sur n'importe quelle forme, 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 vos propres images) et IA. Le bouton Code à côté ouvre le source SVG dans sa propre fenêtre.
  • Zoom sur la sélection — la loupe au bout de la barre de menus remplit l'écran avec ce qui est sélectionné. Pratique en cours d'édition, quand vous venez de choisir l'élément à travailler.
  • 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, avec deux réglages d'espacement :

  • Interligne — l'écart entre les lignes, exprimé en multiple du corps, pour qu'il tienne quand vous redimensionnez le texte.
  • Interlettrage — l'écart entre les caractères, en pixels canevas. Les valeurs négatives le resserrent.

Un texte sur le canevas peut tenir sur plusieurs lignes. Double-cliquez dessus pour écrire et appuyez sur Entrée pour passer à la ligne, comme partout ailleurs. Échap ou un clic à côté termine la saisie.

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.

Placer une image sur le canevas

Il y a deux façons de faire entrer une image, et elles servent des usages différents.

Importez-la comme objet à part entière quand c'est l'image que vous placez. Fichier ▸ Importer une image depuis cet appareil…, ou Bibliothèque ▸ Mes images. Elle arrive à sa taille propre et se comporte ensuite comme n'importe quel objet : redimensionnez-la et elle s'agrandit, réglez son opacité, teintez-la, ou détourez-la sur une forme.

Bibliothèque ▸ Mes images réunit les deux sources :

  • Téléverser depuis cet appareil — votre fichier, depuis votre ordinateur ou votre téléphone. Aucun compte requis.
  • Acheté chez Waripixel — tout ce que vous nous avez acheté. Connectez-vous et tout est là ; en choisir une place l'original pleine résolution que vous avez payé, pas l'aperçu.

Remplissez plutôt une forme quand c'est la forme qui prime — une photo versée dans un cercle, un titre, une icône de la bibliothèque. C'est la section ci-dessous.

La différence compte au redimensionnement. Une image importée s'agrandit. Une photo servant de remplissage est mesurée sur sa forme : redimensionner la forme recadre la photo au lieu de l'agrandir.

Couleur d'une image

Une image importée sélectionnée, la section Couleur de l'image l'étalonne :

  • Saturation — 0 % la vide en gris, 100 % la laisse telle quelle, 200 % pousse la couleur à fond.
  • Teinte — une couleur et une intensité. La teinte conserve les ombres et les lumières de l'image et ne prend que la couleur de la pastille : cela se lit comme un voile, pas comme une couche de peinture.

Rien n'est figé. Les pixels d'origine restent intacts en dessous, et Revenir aux couleurs d'origine retire complètement l'étalonnage.

Détourer une image sur une forme

Posez n'importe quelle forme sur une image, sélectionnez les deux, puis choisissez Objet ▸ Détourer sur la forme. L'image est réduite à ce contour — une photo dans un cercle, une étoile, ou n'importe quel tracé que vous avez dessiné.

Rien n'est perdu : la forme passe dans les définitions du fichier et Objet ▸ Libérer le détourage vous la rend telle quelle. Cela fonctionne sur une image importée, sur une forme remplie d'une photo, et sur tout ce que vous voulez couper à un contour.

Une image n'accepte qu'un détourage à la fois : une image détourée ne peut donc pas aussi prendre un rayon d'angle — le détourage fait déjà ce travail. Libérez-le d'abord si vous préférez des angles arrondis.

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.

Tirez sur un côté pour le courber. En édition de nœuds, inutile de travailler point par point. Appuyez n'importe où le long d'un côté — la portion de contour entre deux points — et tirez : ce côté se courbe pour suivre le pointeur. Les deux points à ses extrémités ne bougent pas, donc les côtés voisins restent intacts. Saisissez-le près d'une extrémité et le renflement se forme près de cette extrémité. Le côté sous le pointeur est tracé avant que vous n'appuyiez, pour voir ce que vous allez saisir.

Maintenez Maj en tirant sur un côté pour déplacer le côté entier, avec ses deux points. Les côtés voisins s'étirent pour suivre.

Un côté droit n'a aucune courbe à déplacer : la première traction en crée une. Rendre droit dans la barre de nœuds le remet comme avant.

Double-cliquez un côté pour y poser un point. Le côté devient deux moitiés que vous pouvez courber ou déplacer séparément. La forme ne bouge pas : un point apparaît exactement là où vous avez cliqué, et il reste sélectionné pour que Rendre droit et Rendre courbe s'y appliquent aussitôt. Tirez le nouveau point sur un côté droit et le contour forme un angle ; tirez-le sur une courbe et il reste lisse.

Un double-clic sur le bord d'un rectangle, d'une ellipse ou d'une étoile fait de même en le convertissant d'abord en tracé — c'est donc aussi le chemin le plus court vers l'édition de nœuds. Un double-clic ailleurs garde le sens qu'il a toujours eu.

Combiner et découper les formes

Le menu Tracé propose six opérations, nommées comme dans Inkscape :

  • Union — fusionne les formes en une seule.
  • Différence — retire la forme du dessus de celle du dessous.
  • Intersection — ne garde que la zone commune.
  • Exclusion — garde tout sauf la zone commune.
  • Division — découpe la forme du dessous en morceaux pleins distincts.
  • Découper le tracé — découpe le contour du dessous en lignes ouvertes distinctes, sans remplissage.

Union, Intersection et Exclusion acceptent autant de formes que vous voulez. Différence, Division et Découper le tracé ont un sujet et une lame : elles en demandent donc exactement deux — et elles lisent l'ordre d'empilement, pas l'ordre de vos clics : c'est toujours la forme du dessus qui découpe.

Découper le tracé laisse des contours ouverts, qu'un remplissage ne peut pas montrer. Les morceaux prennent la couleur de trait de l'original pour rester visibles.

Angles arrondis

La section Angles arrondis du panneau Design apparaît dès que la sélection a des angles à arrondir, et un seul curseur couvre trois choses différentes :

  • Un rectangle garde son propre arrondi : modifiable ou annulable à tout moment.
  • Une image est détourée sur un rectangle arrondi à sa taille. Rien n'est retiré du fichier lui-même.
  • Tout autre contour — tracé, polygone, étoile — voit chaque angle vif rogné puis relié par un arc. Les angles où des courbes se rejoignent déjà sont laissés tels quels : ils sont déjà ronds.

Réécrire un contour serait normalement sans retour : le studio conserve donc la version à angles vifs sur la forme. Revenir à 0 la restitue à l'identique, et bouger le curseur ré-arrondit toujours depuis l'original plutôt que d'arrondir ce qui l'est déjà. Un rayon trop grand pour la forme se réduit discrètement à ce qui tient.

Arrondir un polygone ou une étoile le convertit d'abord en tracé, comme le fait Objet en tracé.

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.
  • Le canevas défile sans fin. Défilez jusqu'en haut ou jusqu'en bas et un écran de place s'ouvre au-delà : vous pouvez toujours pousser la page de côté pour travailler dans sa marge. Ajuster à l'écran remet la vue en place.
  • Clavier : S sélection, R rectangle, E ellipse, L ligne, D crayon, P plume, T texte, N nœuds, G grille, + zoom avant, − zoom arrière, ⌘Z annuler, ⌫ supprimer.
  • Le zoom au + et au − maintient le centre de la vue immobile : ce que vous regardiez reste sous vos yeux au lieu de glisser hors de l'écran.