ClearML/clearml-docs
1
0
Fork 0
mirror of https://github.com/clearml/clearml-docs synced 2025-03-03 02:32:49 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add plot controls (#2)

Browse Source 
Clarify plot control + ALT texts
This commit is contained in:
pollfly 2021-07-07 14:54:53 +03:00 committed by GitHub
parent c1854ad74b
commit 9e7dfb49c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 84 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
docs/webapp/webapp_exp_track_visual.md
View File

@ -5,7 +5,7 @@ title: Tracking Experiments and Visualizing Results
While an experiment is running, and any time after it finishes, track it and visualize the results in the **ClearML Web UI**,
including:
* [Execution details](#execution-details) - Code, the base Docker image used for **ClearML Agent**, output destination for artifacts, and the logging level.
* [Execution details](#execution-details) - Code, the base Docker image used for **[ClearML Agent](../clearml_agent.md)**, output destination for artifacts, and the logging level.
* [Configuration](#configuration) - Hyperparameters, user properties, and configuration objects.
* [Artifacts](#artifacts) - Input model, output model, model snapshot locations, other artifacts.
* [General information](#general-information) - Information about the experiment, for example: the experiment start, create, and last update times and dates, user creating the experiment, and its description.
@ -22,7 +22,7 @@ The **ClearML Web UI** provides two viewing modes for experiment details:
* Full screen details mode.
Both modes contain all experiment details. When either view is open, switch to the other mode by clicking <img src="/docs/latest/icons/ico-info-min.svg" className="icon size-md space-sm" />
Both modes contain all experiment details. When either view is open, switch to the other mode by clicking <img src="/docs/latest/icons/ico-info-min.svg" alt="Table/Full screen view" className="icon size-md space-sm" />
(**View in experiments table / full screen**), or clicking <img src="/docs/latest/icons/ico-bars-menu.svg" alt="Bars menu" className="icon size-sm space-sm" /> (**menu**) > **View in experiments
table / full screen**.
@ -36,7 +36,7 @@ can be performed from the table (as well as the menu in the info panel).
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_40.png)
![Info panel](../img/webapp_tracking_40.png)
</div>
</details>
@ -50,7 +50,7 @@ table is not visible when the full screen details view is open. Perform experime
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_33.png)
![Full screen view](../img/webapp_tracking_33.png)
</div>
</details>
@ -88,7 +88,7 @@ The output details include:
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_18.png)
![Execution details section](../img/webapp_tracking_18.png)
</div>
</details>
@ -100,7 +100,7 @@ The output details include:
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_19.png)
![Uncomitted changes section](../img/webapp_tracking_19.png)
</div>
</details>
@ -111,7 +111,7 @@ The output details include:
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_20.png)
![Installed packages section](../img/webapp_tracking_20.png)
</div>
</details>
@ -137,7 +137,7 @@ The **Args** section shows automatically logged `argparse` arguments, and all ol
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_22.png)
![Command line arguments configuration section](../img/webapp_tracking_22.png)
</div>
</details>
@ -151,7 +151,7 @@ If the `CLEARML_LOG_ENVIRONMENT` variable was set, the **Environment** section w
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_23.png)
![Environment variables configuration section](../img/webapp_tracking_23.png)
</div>
</details>
@ -166,7 +166,7 @@ with a `name` argument provided.
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_25.png)
![Custom parameters section](../img/webapp_tracking_25.png)
</div>
</details>
@ -179,7 +179,7 @@ The **TF_DEFINE** sections shows automatic TensorFlow logging.
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_26.png)
![TF_DEFINE parameter section](../img/webapp_tracking_26.png)
</div>
</details>
@ -195,7 +195,7 @@ except experiments whose status is *Published* (read-only).
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_21.png)
![User properties section](../img/webapp_tracking_21.png)
</div>
</details>
@ -216,7 +216,7 @@ In older versions of **ClearML Server**, the Task model configuration appeared i
<summary className="cml-expansion-panel-summary">View a screenshot - Configuration objects </summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_24.png)
![Configuration objects](../img/webapp_tracking_24.png)
</div>
</details>
@ -226,14 +226,11 @@ In older versions of **ClearML Server**, the Task model configuration appeared i
<summary className="cml-expansion-panel-summary">View a screenshot - Custom configuration object</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_28.png)
![Custom configuration objects](../img/webapp_tracking_28.png)
</div>
</details>
## Artifacts
Artifacts tracked in an experiment appear in the **ARTIFACTS** tab, and include models and other artifacts.
@ -259,7 +256,7 @@ including design, label enumeration, and general information, go to the **MODELS
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_exp_artifacts_01.png)
![Models in Artifacts tab](../img/webapp_exp_artifacts_01.png)
</div>
</details>
@ -284,7 +281,7 @@ Artifacts which are uploaded and dynamically tracked by **ClearML** appear in th
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_29.png)
![Data audit section](../img/webapp_tracking_29.png)
</div>
</details>
@ -297,7 +294,7 @@ Other artifacts, which are uploaded but not dynamically tracked after the upload
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_30.png)
![Other artifacts section](../img/webapp_tracking_30.png)
</div>
</details>
@ -319,7 +316,7 @@ General experiment details appear in the **INFO** tab. This includes information
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_31.png)
![Info tab](../img/webapp_tracking_31.png)
</div>
</details>
@ -341,7 +338,7 @@ is downloadable. To view the end of the log, click **Jump to end**.
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_32.png)
![Console tab](../img/webapp_tracking_32.png)
</div>
</details>
@ -359,25 +356,26 @@ are on the left side of the window. The tools include:
* **Group by** - select one of the following:
* **Metric** - all variants for a metric on the same plot
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_33.png)
![Plots grouped by metric](../img/webapp_tracking_33.png)
</div>
</details>
</div>
</details>
<br/>
* **None** - Group by metric and variant (individual metric-variant plots).
* **None** - Group by metric-variant combination (individual metric-variant plots).
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![Plots groups my metric and variant](../img/webapp_tracking_34.png)
![image](../img/webapp_tracking_34.png)
</div>
</details>
</div>
</details>
* Show / hide plots - Click **HIDE ALL**, and then click <img src="/docs/latest/icons/ico-show.svg" alt="Eye Show All" className="icon size-md space-sm" />
on those you want to see.
@ -387,50 +385,53 @@ are on the left side of the window. The tools include:
* **WALL** - local clock time
* Curve smoothing (scalars, only) - In **Smoothing** **>** Move the slider or type a smoothing factor between **0** and **0.999**.
See additional [plot controls](#plot-controls) below.
#### Plot controls
Each plot supports plot controls allowing you better analyze the results. The table below lists the plot controls which may be available for any plot. Hover over a plot, and the controls appear.
|Icon|Description|
|---|---|
| <img src="/docs/latest/icons/ico-download-png.svg" className="icon size-md space-sm" /> | Download plots as PNG files. |
| <img src="/docs/latest/icons/ico-pan.svg" className="icon size-md space-sm" /> | Pan around plot. Click <img src="/docs/latest/icons/ico-pan.svg" className="icon size-md space-sm" />, click the plot, and then drag. |
| <img src="/docs/latest/icons/ico-dotted-box.svg" className="icon size-md space-sm" /> | To examine an area, draw a dotted box around it. Click <img src="/docs/latest/icons/ico-dotted-box.svg" className="icon size-md space-sm" /> and then drag. |
| <img src="/docs/latest/icons/ico-dotted-lasso.svg" className="icon size-md space-sm" /> | To examine an area, draw a dotted lasso around it. Click <img src="/docs/latest/icons/ico-dotted-lasso.svg" className="icon size-md space-sm" /> and then drag. |
| <img src="/docs/latest/icons/ico-zoom.svg" className="icon size-md space-sm" /> | Zoom into a section of a plot. Zoom in - Click <img src="/docs/latest/icons/ico-zoom.svg" className="icon size-md space-sm" /> and drag over a section of the plot. Reset to original scale - Click <img src="/docs/latest/icons/ico-reset-autoscale.svg" className="icon size-md space-sm" /> . |
| <img src="/docs/latest/icons/ico-zoom-in-square.svg" className="icon size-md space-sm" /> | Zoom in. |
| <img src="/docs/latest/icons/ico-zoom-out-square.svg" className="icon size-md space-sm" /> | Zoom out. |
| <img src="/docs/latest/icons/ico-reset-autoscale.svg" className="icon size-md space-sm" /> | Reset to autoscale after zooming ( <img src="/docs/latest/icons/ico-zoom.svg" className="icon size-md space-sm" />, <img src="/docs/latest/icons/ico-zoom-in-square.svg" className="icon size-md space-sm" />, or <img src="/docs/latest/icons/ico-zoom-out-square.svg" className="icon size-md space-sm" />). |
| <img src="/docs/latest/icons/ico-reset-axes.svg" className="icon size-md space-sm" /> | Reset axes after a zoom. |
| <img src="/docs/latest/icons/ico-spike-lines.svg" className="icon size-md space-sm" /> | Show / hide spike lines. |
| <img src="/docs/latest/icons/ico-show-closest.svg" className="icon size-md space-sm" /> | Show the closest data point on hover, including horizontal and vertical axes values. Click <img src="/docs/latest/icons/ico-show-closest.svg" className="icon size-md space-sm" /> and then hover over a series on the plot. |
| <img src="/docs/latest/icons/ico-compare-data.svg" className="icon size-md space-sm" /> | Compare data on hover. Click <img src="/docs/latest/icons/ico-compare-data.svg" className="icon size-md space-sm" /> and then hover over the plot. |
| <img src="/docs/latest/icons/ico-logarithmic-view.svg" className="icon size-md space-sm" /> | Switch to logarithmic view. |
| <img src="/docs/latest/icons/ico-ico-graph-legend.svg" className="icon size-md space-sm" /> | Hide / show the legend. |
| <img src="/docs/latest/icons/ico-download-json.svg" className="icon size-md space-sm" /> | To get metric data for further analysis, download plot data to JSON file. |
### Other plots
Other plots include data reported by libraries, visualization tools, and **ClearML** explicit reporting. These may include
2D and 3D plots, tables (Pandas and CSV files), and Plotly plots. Other plots appear in **RESULTS** **>** **PLOTS**.
### Plots
Non-time-series plots appear in **RESULTS** **>** **PLOTS**. These include data reported by libraries, visualization
tools, and **ClearML** explicit reporting. These may include 2D and 3D plots, tables (Pandas and CSV files), and Plotly plots.
Individual plots can be shown / hidden or filtered by title.
<details className="cml-expansion-panel screenshot">
<summary className="cml-expansion-panel-summary">View a screenshot</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_35.png)
![Plots tab](../img/webapp_tracking_35.png)
</div>
</details>
#### Plot controls
The table below lists the plot controls which may be available for any plot (in the **SCALARS** and **PLOTS** tabs).
These controls allow you to better analyze the results. Hover over a plot, and the controls appear.
|Icon|Description|
|---|---|
| <img src="/docs/latest/icons/ico-download-png.svg" alt="Download PNG icon" className="icon size-sm space-sm" /> | Download plots as PNG files. |
| <img src="/docs/latest/icons/ico-pan.svg" alt="Pan icon" className="icon size-sm space-sm" /> | Pan around plot. Click <img src="/docs/latest/icons/ico-pan.svg" alt="Pan icon" className="icon size-sm space-sm" />, click the plot, and then drag. |
| <img src="/docs/latest/icons/ico-dotted-box.svg" alt="Dotted box icon" className="icon size-sm space-sm" /> | To examine an area, draw a dotted box around it. Click <img src="/docs/latest/icons/ico-dotted-box.svg" alt="Dotted box icon" className="icon size-sm space-sm" /> and then drag. |
| <img src="/docs/latest/icons/ico-dotted-lasso.svg" alt="Dotted lasso icon" className="icon size-sm space-sm" /> | To examine an area, draw a dotted lasso around it. Click <img src="/docs/latest/icons/ico-dotted-lasso.svg" alt="Dotted lasso icon" className="icon size-sm space-sm" /> and then drag. |
| <img src="/docs/latest/icons/ico-zoom.svg" alt="Zoom icon" className="icon size-sm space-sm" /> | Zoom into a section of a plot. Zoom in - Click <img src="/docs/latest/icons/ico-zoom.svg" alt="Zoom icon" className="icon size-sm space-sm" /> and drag over a section of the plot. Reset to original scale - Click <img src="/docs/latest/icons/ico-reset-autoscale.svg" alt="Reset autoscale icon" className="icon size-sm space-sm" /> . |
| <img src="/docs/latest/icons/ico-zoom-in-square.svg" alt="Zoom-in icon" className="icon size-sm space-sm" /> | Zoom in. |
| <img src="/docs/latest/icons/ico-zoom-out-square.svg" alt="Zoom-out icon" className="icon size-sm space-sm" /> | Zoom out. |
| <img src="/docs/latest/icons/ico-reset-autoscale.svg" alt="Reset autoscale icon" className="icon size-sm space-sm" /> | Reset to autoscale after zooming ( <img src="/docs/latest/icons/ico-zoom.svg" alt="Zoom icon" className="icon size-sm space-sm" />, <img src="/docs/latest/icons/ico-zoom-in-square.svg" alt="Zoom-in icon" className="icon size-sm space-sm" />, or <img src="/docs/latest/icons/ico-zoom-out-square.svg" alt="Zoom-out icon" className="icon size-sm space-sm" />). |
| <img src="/docs/latest/icons/ico-reset-axes.svg" alt="Reset axes icon" className="icon size-sm space-sm" /> | Reset axes after a zoom. |
| <img src="/docs/latest/icons/ico-spike-lines.svg" alt="Spike lines icon" className="icon size-sm space-sm" /> | Show / hide spike lines. |
| <img src="/docs/latest/icons/ico-show-closest.svg" alt="Show closest icon" className="icon size-sm space-sm" /> | Show the closest data point on hover, including horizontal and vertical axes values. Click <img src="/docs/latest/icons/ico-show-closest.svg" alt="Show closest icon" className="icon size-sm space-sm" /> and then hover over a series on the plot. |
| <img src="/docs/latest/icons/ico-compare-data.svg" alt="Compare data icon" className="icon size-sm space-sm" /> | Compare data on hover. Click <img src="/docs/latest/icons/ico-compare-data.svg" alt="Compare data icon" className="icon size-sm space-sm" /> and then hover over the plot. |
| <img src="/docs/latest/icons/ico-logarithmic-view.svg" alt="Logarithmic view icon" className="icon size-sm space-sm" /> | Switch to logarithmic view. |
| <img src="/docs/latest/icons/ico-ico-graph-legend.svg" alt="Graph legend icon" className="icon size-sm space-sm" /> | Hide / show the legend. |
| <img src="/docs/latest/icons/ico-download-json.svg" alt="Download JSON icon" className="icon size-sm space-sm" /> | To get metric data for further analysis, download plot data to JSON file. |
| <img src="/docs/latest/icons/ico-maximize.svg" alt="Maximize plot icon" className="icon size-sm space-sm" /> | Expand plot to entire window. |
#### 3D plot controls
|Icon|Description|
|---|---|
| <img src="/docs/latest/icons/ico-orbital-rotation.svg" alt="Orbital rotation mode icon" className="icon size-sm" />| Switch to orbital rotation mode - rotate the plot around its middle point. |
| <img src="/docs/latest/icons/ico-turntable-rotation.svg" alt="Turntable rotation mode icon" className="icon size-sm" />| Switch to turntable rotation mode - rotate the plot around its middle point while constraining one axis |
| <img src="/docs/latest/icons/ico-homepage.svg" alt="reset axes icon" className="icon size-sm" />| Reset axes to default position. |
### Debug samples
@ -448,7 +449,7 @@ View debug samples by metric at any iteration. The most recent iteration appears
<summary className="cml-expansion-panel-summary">View a screenshot - Debug samples</summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_43.png)
![Debug Samples tab](../img/webapp_tracking_43.png)
</div>
</details>
@ -459,7 +460,7 @@ View debug samples by metric at any iteration. The most recent iteration appears
<summary className="cml-expansion-panel-summary">View a screenshot - Viewer </summary>
<div className="cml-expansion-panel-content">
![image](../img/webapp_tracking_44.png)
![Debug Samples image viewer](../img/webapp_tracking_44.png)
</div>
</details>
@ -485,8 +486,6 @@ View debug samples by metric at any iteration. The most recent iteration appears
* For images, locate a position on the sample - Hover over the sample and the X, Y coordinates appear in the legend below the sample.
## Tagging experiments
Tags are user-defined, color-coded labels that can be added to experiments (and models), allowing to easily identify and

4
static/icons/ico-homepage.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M19.14985,13.22216v5.93751a.79052.79052,0,0,1-.24462.57818.69122.69122,0,0,1-.55595.22238h-4.7589v-4.7589h-3.18v4.7589H5.65146a.7543.7543,0,0,1-.556-.22238.86245.86245,0,0,1-.24461-.57818V13.1332l7.13835-5.87079,7.13836,5.87079A.12883.12883,0,0,1,19.14985,13.22216Zm2.75749-.86728-.75609.91175a.45993.45993,0,0,1-.26685.13343h-.04448a.50936.50936,0,0,1-.26685-.06671l-8.58382-7.1606-8.58382,7.1606a.58921.58921,0,0,1-.28909.089.60612.60612,0,0,1-.26685-.15567l-.77833-.91175a.37075.37075,0,0,1-.06671-.28909.38632.38632,0,0,1,.13342-.26686l8.91739-7.42745a1.4147,1.4147,0,0,1,.934-.33356,1.50255,1.50255,0,0,1,.95623.33356L15.96983,6.9066V4.48267a.38132.38132,0,0,1,.40028-.40028h2.37945a.38132.38132,0,0,1,.40029.40028v5.048l2.713,2.26826a.46.46,0,0,1,.13342.26686A.35765.35765,0,0,1,21.90734,12.35488Z" fill="#8f9dc9" />
<path d="M24,24H0V0H24Z" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 943 B

4
static/icons/ico-maximize.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M22,2v8.48524L18.46452,6.94976,13.41429,12,12,10.58571l5.05024-5.05023L13.51476,2ZM12,13.41429,10.58571,12,5.53548,17.05024,2,13.51476V22h8.48524L6.94976,18.46452Z" fill="#8f9dc9" />
<path d="M24,24H0V0H24Z" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 303 B

4
static/icons/ico-orbital-rotation.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M20.95323,5.179c-.106-.0848-.1908-.1484-.2968-.2332-7.611-5.57573-12.29628.65721-12.29628.65721L6.1977,5.00944l1.22962,8.48019c0-.0212.0212-.0212.0424-.0424a61.09835,61.09835,0,0,1,7.44137-5.27892s-1.31443-.57241-2.12-.89042c1.86564-1.75964,4.7065-3.87969,7.35656-2.58646a6.85726,6.85726,0,0,1,.93283.57241A.4434.4434,0,0,1,20.95323,5.179Zm.76322,6.975s1.35683-4.85491-1.86564-6.27534a4.33668,4.33668,0,0,0-3.71009.2332,11.07832,11.07832,0,0,1,5.27892,5.63933,5.03565,5.03565,0,0,1,.23321.65722,7.044,7.044,0,0,0,.2332-.67842C21.78005,12.0056,21.71645,12.154,21.71645,12.154ZM5.28608,17.22092a5.86982,5.86982,0,0,0,4.19769.67841c-2.56526-1.696-4.2189-7.33537-4.2189-7.33537l-2.03524.318L2,11.13638S3.166,15.92769,5.28608,17.22092ZM18.07,14.40125l-6.72056,2.94687a3.13168,3.13168,0,0,0,.40281.29681c.14841.106.50881.318.50881.318a6.7763,6.7763,0,0,1-8.247-.0848,8.90288,8.90288,0,0,0,11.36346,2.37446l.65721.46641,2.12-6.339Zm-6.31775,3.24368q.19081.1272.50881.318S11.90063,17.75093,11.75222,17.64493Z" fill="#8f9dc9" />
<path d="M24,24H0V0H24Z" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
static/icons/ico-turntable-rotation.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M18.572,17.0368v-.86225l-2.734,1.367,2.734,1.388v-.82019c0,.021.7571.29443.82019.52576.08412.31546-.12618.46267-.33649.63092a3.05278,3.05278,0,0,1-1.17771.42061,24.95753,24.95753,0,0,1-5.8675.4837c-5.489,0-7.1714-.715-7.42377-1.2408.06309-1.26183,4.795-2.31336,4.795-2.31336C6.43743,16.78444,2,17.35226,2,19.05573c0,2.52366,6.16193,2.98633,9.96845,2.98633C15.22818,22.04206,22,21.57939,22,19.05573c0-1.05152-1.55626-1.66141-3.428-2.01893m-7.50789.29443c-1.21977.10515-2.082.44164-2.082.84122,0,.50473,1.367.90431,3.0284.90431s3.00736-.39958,3.00736-.90431c0-.39958-.88328-.715-2.061-.84122V12.78864h1.82965l-2.776-2.83911L9.21346,12.78864h1.85068Zm3.5121-10.8307H11.71609v-.021c.33649-.33649.65194-.715.9674-1.09359l1.76656-2.29232V1.95794H9.613V3.4511h2.60778v.021c-.33649.35752-.58885.673-.92534,1.07256L9.42376,6.94217V8.01472h5.15248Z" fill="#8f9dc9" />
<path d="M24,24H0V0H24Z" fill="none"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 978 B