Skip to main content

Figures

Overview​

The Figure Editor is a powerful component of Figlinq, based on the open-source SVGedit, which provides a suite of tools for creating and editing interactive SVG (Scalable Vector Graphics) figures. This document provides an overview of the general and Figlinq-specific features of the Figure Editor.

Figlinq features​

AI Assistant integration​

Natural Language Commands: Direct the AI Assistant to modify selected plots using natural language. To initiate, select one or more plots and input the command. Note: The assistant in the figure editor does not support the addition of new traces. More details can be found here.

Enable interactivity​

To toggle between static and interactive modes for Figlinq plots and website-linked images, use the top-right toggle button located in the navigation bar.

Add rich content​

Figures can seamlessly incorporate Figlinq plots (powered by plotly.js), images, websites, text and a variety of graphical elements:

  • To upload local images from your computer, click 'File > Upload image' menu.
  • To add images or plots already available in your Figlinq workspace, click 'File > Add Figlinq content'.
  • To link any external website to any image, click 'Image > Add external website'. In interactive mode, the website will be displayed in place of the original image. Ensure that image aspect ratio match those of the intended website!

Precisely align and distribute plots​

To align plots precisely by their axes click 'Plot > Align'. The alignment is meticulously based on the axis and other plot elements to ensure flawless alignment:

  • Roughly arrange plots horizontally, vertically, or in a grid.
  • Adjust the distance between plots as desired.
  • Click one of the distribution type buttons in the popup.

Manipulate layers​

Within the Figure Viewer (a separate component of Figlinq), users can toggle individual layers on or off. This feature is especially beneficial when layering elements such as annotations or masks over images.

Export press-ready images or PDFs​

Export your creations as high-resolution images or vector-based PDFs via the 'File > Export' menu. Supported formats include png, jpg, bmp, and pdf.

General Features​

The Figure Editor is built upon the foundation provided by SVGedit, an open-source vector graphics editor for the web. The default features of SVGedit are seamlessly integrated into the Figlinq environment.

  1. Web-based Interface: SVGEdit operates entirely within a web browser, eliminating the need for any external software installations. Its interface is intuitive, catering to both beginners and advanced users.

  2. Drawing Tools: Shapes: SVGEdit offers tools to create basic shapes like rectangles, circles, ellipses, lines, and polygons. Paths: Users can draw custom paths using the pen tool, providing flexibility in creating complex designs. Freehand: For those who prefer drawing freeform, SVGEdit has a freehand tool.

  3. Text Editing: SVGEdit allows users to add and edit text within their graphics. This includes features like font selection, size adjustment, and text alignment.

  4. Styling and Coloring: Users can adjust the fill and stroke of elements. Gradients are also supported. The color picker tool helps in selecting precise colors.

  5. Transformations: SVGEdit supports various transformations, including move, rotate, scale, and skew.

  6. Layer Management: Users can organize their graphics into layers, making it easier to manage complex designs. The layer panel is located along the right side of the screen. By default the panel is closed, click the vertical 'Layers' text to open it. The layer panel allows users to manage the order of layers in the figure, as well as create or remove layers and move content between layers. The order of elements in the layer panel corresponds to the order in which they are rendered in the figure. The layer panel also allows users to toggle the visibility of individual layers.

  7. Grid and Align: SVGEdit provides a grid system to help in accurate placement and alignment of elements. Tools for aligning and distributing elements relative to each other are also available.

  8. Zoom and Pan: Users can zoom in and out of their canvas for detailed edits. The pan tool helps in navigating larger canvases.

Vector-Based SVG figures​

The Figure Editor is specifically designed to create and modify vector-based (SVG) figures. This allows for the creation of high-resolution figures that can be scaled to any size without loss of quality. Additionally, vector-based figures are ideal for the creation of interactive figures.

SVG stands for Scalable Vector Graphics. It is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Unlike raster graphics (like PNG or JPG) which store images as a collection of pixels, vector graphics like SVG store image information as paths, shapes, and fills. This means SVG images can be scaled up or down without losing quality. SVG images are defined in XML, a markup language. This means you can open an SVG image with a text editor and read or modify its code. An example SVG might look something like this:

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

This code defines a simple SVG image with a red circle.

SVGs are not just static images. They can be animated and made interactive. This is often achieved using CSS or JavaScript. For instance, you can make an SVG shape change colors when a user hovers over it or animate paths to draw themselves. SVG can be embedded directly into HTML pages. This tight integration with the web makes SVGs particularly useful for illustrations, and graphics on websites since they remain sharp on all screen sizes and resolutions.