open-maui/OpenMaui
2
0
Fork 0
Code Issues Releases 1

Image fixes

Browse Source
This commit is contained in:
David H. Friedel Jr.
2026-01-24 03:18:08 +00:00
parent ed89b6494d
commit 433787ff80
7 changed files with 383 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
Handlers/ImageHandler.cs
View File

@@ -24,6 +24,8 @@ public partial class ImageHandler : ViewHandler<IImage, SkiaImage>
[nameof(IView.Background)] = MapBackground,
["Width"] = MapWidth,
["Height"] = MapHeight,
["HorizontalOptions"] = MapHorizontalOptions,
["VerticalOptions"] = MapVerticalOptions,
};
public static CommandMapper<IImage, ImageHandler> CommandMapper = new(ViewHandler.ViewCommandMapper)
@@ -148,6 +150,26 @@ public partial class ImageHandler : ViewHandler<IImage, SkiaImage>
}
}
public static void MapHorizontalOptions(ImageHandler handler, IImage image)
{
if (handler.PlatformView is null) return;
if (image is Image img)
{
handler.PlatformView.HorizontalOptions = img.HorizontalOptions;
}
}
public static void MapVerticalOptions(ImageHandler handler, IImage image)
{
if (handler.PlatformView is null) return;
if (image is Image img)
{
handler.PlatformView.VerticalOptions = img.VerticalOptions;
}
}
// Image source loading helper
private ImageSourceServiceResultManager _sourceLoader = null!;

19
Hosting/LinuxViewRenderer.cs
View File

@@ -201,9 +201,22 @@ public class LinuxViewRenderer
}
}
// Set flyout footer with version info
var version = Assembly.GetEntryAssembly()?.GetName().Version;
skiaShell.FlyoutFooterText = $"Version {version?.Major ?? 1}.{version?.Minor ?? 0}.{version?.Build ?? 0}";
// Render flyout footer if present, otherwise use version text
if (shell.FlyoutFooter is View footerView)
{
var skiaFooter = RenderView(footerView);
if (skiaFooter != null)
{
skiaShell.FlyoutFooterView = skiaFooter;
skiaShell.FlyoutFooterHeight = (float)(footerView.HeightRequest > 0 ? footerView.HeightRequest : 40.0);
}
}
else
{
// Fallback: use assembly version as footer text
var version = Assembly.GetEntryAssembly()?.GetName().Version;
skiaShell.FlyoutFooterText = $"Version {version?.Major ?? 1}.{version?.Minor ?? 0}.{version?.Build ?? 0}";
}
// Process shell items into sections
foreach (var item in shell.Items)

189
Views/SkiaImage.cs
View File

@@ -461,6 +461,23 @@ public class SkiaImage : SkiaView
try
{
// First try to load from embedded resources (MAUI standard pattern)
// MAUI converts SVG to PNG at build time, referenced as .png in XAML
var (stream, actualExtension) = TryLoadFromEmbeddedResource(filePath);
if (stream != null)
{
_isSvg = actualExtension.Equals(".svg", StringComparison.OrdinalIgnoreCase);
_currentFilePath = filePath;
_cacheKey = $"embedded:{filePath}";
using (stream)
{
await LoadFromStreamWithCacheAsync(stream, _cacheKey);
}
return;
}
// Fall back to file system
List<string> searchPaths = new List<string>
{
filePath,
@@ -469,7 +486,8 @@ public class SkiaImage : SkiaView
Path.Combine(AppContext.BaseDirectory, "Resources", filePath)
};
// Also try SVG if looking for PNG
// Also try SVG if looking for PNG (MAUI converts SVG to PNG at build time,
// but on Linux we load SVG directly)
if (filePath.EndsWith(".png", StringComparison.OrdinalIgnoreCase))
{
string svgPath = Path.ChangeExtension(filePath, ".svg");
@@ -495,6 +513,7 @@ public class SkiaImage : SkiaView
_isSvg = false;
_currentFilePath = null;
_cacheKey = null;
Console.WriteLine($"[SkiaImage] File not found: {filePath}");
ImageLoadingError?.Invoke(this, new ImageLoadingErrorEventArgs(new FileNotFoundException(filePath)));
return;
}
@@ -1153,6 +1172,174 @@ public class SkiaImage : SkiaView
}
base.Dispose(disposing);
}
/// <summary>
/// Tries to load an image from embedded resources.
/// Follows MAUI convention: XAML references .png, but source can be .svg
/// </summary>
private static (Stream? stream, string extension) TryLoadFromEmbeddedResource(string filePath)
{
// Get the file name without path
string fileName = Path.GetFileName(filePath);
string fileNameWithoutExt = Path.GetFileNameWithoutExtension(fileName);
string requestedExt = Path.GetExtension(fileName);
// Search all loaded assemblies for the resource
var assemblies = AppDomain.CurrentDomain.GetAssemblies()
.Where(a => !a.IsDynamic && !string.IsNullOrEmpty(a.Location))
.ToList();
// Also include entry assembly
var entryAssembly = System.Reflection.Assembly.GetEntryAssembly();
if (entryAssembly != null && !assemblies.Contains(entryAssembly))
{
assemblies.Insert(0, entryAssembly);
}
foreach (var assembly in assemblies)
{
try
{
var resourceNames = assembly.GetManifestResourceNames();
// Try exact match first
foreach (var resourceName in resourceNames)
{
if (resourceName.EndsWith(fileName, StringComparison.OrdinalIgnoreCase))
{
var stream = assembly.GetManifestResourceStream(resourceName);
if (stream != null)
{
Console.WriteLine($"[SkiaImage] Loaded embedded resource: {resourceName}");
return (stream, requestedExt);
}
}
}
// If looking for .png, also try .svg (MAUI pattern)
if (requestedExt.Equals(".png", StringComparison.OrdinalIgnoreCase))
{
string svgFileName = fileNameWithoutExt + ".svg";
foreach (var resourceName in resourceNames)
{
if (resourceName.EndsWith(svgFileName, StringComparison.OrdinalIgnoreCase))
{
var stream = assembly.GetManifestResourceStream(resourceName);
if (stream != null)
{
Console.WriteLine($"[SkiaImage] Loaded SVG as PNG substitute: {resourceName}");
return (stream, ".svg");
}
}
}
}
}
catch
{
// Skip assemblies that can't be inspected
}
}
return (null, string.Empty);
}
/// <summary>
/// Loads image from stream with caching support.
/// </summary>
private async Task LoadFromStreamWithCacheAsync(Stream stream, string cacheKey)
{
// Check cache first
if (_imageCache.TryGetValue(cacheKey, out var cached))
{
cached.LastAccessed = DateTime.UtcNow;
if (cached.IsAnimated && cached.Frames != null)
{
_isAnimatedImage = true;
_animationFrames = cached.Frames;
_currentFrameIndex = 0;
if (cached.Frames.Count > 0 && cached.Frames[0].Bitmap != null)
{
_image?.Dispose();
_image = SKImage.FromBitmap(cached.Frames[0].Bitmap);
}
if (IsAnimationPlaying)
{
StartAnimation();
}
}
else if (cached.Bitmap != null)
{
_isAnimatedImage = false;
_bitmap = cached.Bitmap;
_image?.Dispose();
_image = SKImage.FromBitmap(cached.Bitmap);
}
_isLoading = false;
ImageLoaded?.Invoke(this, EventArgs.Empty);
Invalidate();
return;
}
// Load from stream
using var memoryStream = new MemoryStream();
await stream.CopyToAsync(memoryStream);
memoryStream.Position = 0;
if (_isSvg)
{
// Load SVG using Svg.Skia
await Task.Run(() =>
{
using var svg = new SKSvg();
svg.Load(memoryStream);
if (svg.Picture != null)
{
var cullRect = svg.Picture.CullRect;
int width = (int)(WidthRequest > 0 ? WidthRequest : cullRect.Width);
int height = (int)(HeightRequest > 0 ? HeightRequest : cullRect.Height);
if (width <= 0) width = 64;
if (height <= 0) height = 64;
float scale = Math.Min(width / cullRect.Width, height / cullRect.Height);
int bitmapWidth = Math.Max(1, (int)(cullRect.Width * scale));
int bitmapHeight = Math.Max(1, (int)(cullRect.Height * scale));
var bitmap = new SKBitmap(bitmapWidth, bitmapHeight, false);
using var canvas = new SKCanvas(bitmap);
canvas.Clear(SKColors.Transparent);
canvas.Scale(scale);
// Translate to handle negative viewBox coordinates
canvas.Translate(-cullRect.Left, -cullRect.Top);
canvas.DrawPicture(svg.Picture, null);
CacheAndSetBitmap(cacheKey, bitmap, false);
}
});
}
else
{
// Load raster image
memoryStream.Position = 0;
await Task.Run(() =>
{
using var codec = SKCodec.Create(memoryStream);
if (codec != null)
{
var bitmap = SKBitmap.Decode(codec, codec.Info);
if (bitmap != null)
{
CacheAndSetBitmap(cacheKey, bitmap, false);
}
}
});
}
_isLoading = false;
ImageLoaded?.Invoke(this, EventArgs.Empty);
Invalidate();
}
}
/// <summary>

25
Views/SkiaLayoutView.cs
View File

@@ -443,9 +443,30 @@ public class SkiaStackLayout : SkiaLayoutView
? remainingHeight
: Math.Min(childHeight, remainingHeight > 0 ? remainingHeight : childHeight);
childBoundsLeft = content.Left;
// Respect child's HorizontalOptions for vertical layouts
var useWidth = Math.Min(childWidth, contentWidth);
float childLeft = content.Left;
var horizontalOptions = child.HorizontalOptions;
var alignmentValue = (int)horizontalOptions.Alignment;
// LayoutAlignment: Start=0, Center=1, End=2, Fill=3
if (alignmentValue == 1) // Center
{
childLeft = content.Left + (contentWidth - useWidth) / 2;
}
else if (alignmentValue == 2) // End
{
childLeft = content.Left + contentWidth - useWidth;
}
else if (alignmentValue == 3) // Fill
{
useWidth = contentWidth;
}
childBoundsLeft = childLeft;
childBoundsTop = content.Top + offset;
childBoundsWidth = contentWidth;
childBoundsWidth = useWidth;
childBoundsHeight = useHeight;
offset += useHeight + (float)Spacing;
}

105
Views/SkiaShell.cs
View File

@@ -298,10 +298,15 @@ public class SkiaShell : SkiaLayoutView
public float FlyoutHeaderHeight { get; set; } = 140f;
/// <summary>
/// Optional footer text in the flyout.
/// Optional footer text in the flyout (fallback if no FlyoutFooterView).
/// </summary>
public string? FlyoutFooterText { get; set; }
/// <summary>
/// Optional footer view in the flyout.
/// </summary>
public SkiaView? FlyoutFooterView { get; set; }
/// <summary>
/// Height of the flyout footer.
/// </summary>
@@ -972,9 +977,31 @@ public class SkiaShell : SkiaLayoutView
};
canvas.DrawRect(flyoutBounds, flyoutPaint);
// Draw flyout items
float itemY = flyoutBounds.Top + 80;
// Calculate header and footer heights
float headerHeight = FlyoutHeaderView != null ? FlyoutHeaderHeight : 0f;
float footerHeight = FlyoutFooterView != null ? FlyoutFooterHeight :
(!string.IsNullOrEmpty(FlyoutFooterText) ? FlyoutFooterHeight : 0f);
// Draw flyout header if present
if (FlyoutHeaderView != null)
{
var headerBounds = new SKRect(flyoutBounds.Left, flyoutBounds.Top, flyoutBounds.Right, flyoutBounds.Top + headerHeight);
FlyoutHeaderView.Measure(new Size(headerBounds.Width, headerBounds.Height));
FlyoutHeaderView.Arrange(new Rect(headerBounds.Left, headerBounds.Top, headerBounds.Width, headerBounds.Height));
FlyoutHeaderView.Draw(canvas);
}
// Draw flyout items with scrolling support
float itemHeight = 48f;
float itemsAreaTop = flyoutBounds.Top + headerHeight;
float itemsAreaBottom = flyoutBounds.Bottom - footerHeight;
// Clip to items area (between header and footer)
canvas.Save();
canvas.ClipRect(new SKRect(flyoutBounds.Left, itemsAreaTop, flyoutBounds.Right, itemsAreaBottom));
// Apply scroll offset
float itemY = itemsAreaTop - _flyoutScrollOffset;
using var itemTextPaint = new SKPaint
{
@@ -987,6 +1014,17 @@ public class SkiaShell : SkiaLayoutView
var section = _sections[i];
bool isSelected = i == _selectedSectionIndex;
// Skip items that are scrolled above the visible area
if (itemY + itemHeight < itemsAreaTop)
{
itemY += itemHeight;
continue;
}
// Stop if we're below the visible area
if (itemY > itemsAreaBottom)
break;
// Draw selection background
if (isSelected)
{
@@ -1004,6 +1042,29 @@ public class SkiaShell : SkiaLayoutView
itemY += itemHeight;
}
canvas.Restore();
// Draw flyout footer
if (FlyoutFooterView != null)
{
var footerBounds = new SKRect(flyoutBounds.Left, flyoutBounds.Bottom - footerHeight, flyoutBounds.Right, flyoutBounds.Bottom);
FlyoutFooterView.Measure(new Size(footerBounds.Width, footerBounds.Height));
FlyoutFooterView.Arrange(new Rect(footerBounds.Left, footerBounds.Top, footerBounds.Width, footerBounds.Height));
FlyoutFooterView.Draw(canvas);
}
else if (!string.IsNullOrEmpty(FlyoutFooterText))
{
// Fallback: draw simple text footer
using var footerPaint = new SKPaint
{
TextSize = 12f,
Color = _flyoutTextColorSK.WithAlpha(180),
IsAntialias = true
};
var footerY = flyoutBounds.Bottom - footerHeight / 2 + 4;
canvas.DrawText(FlyoutFooterText, flyoutBounds.Left + 16, footerY, footerPaint);
}
}
public override SkiaView? HitTest(float x, float y)
@@ -1062,20 +1123,33 @@ public class SkiaShell : SkiaLayoutView
if (flyoutBounds.Contains(e.X, e.Y))
{
// Check which section was tapped
float itemY = flyoutBounds.Top + 80;
float itemHeight = 48f;
// Calculate header and footer heights
float headerHeight = FlyoutHeaderView != null ? FlyoutHeaderHeight : 0f;
float footerHeight = FlyoutFooterView != null ? FlyoutFooterHeight :
(!string.IsNullOrEmpty(FlyoutFooterText) ? FlyoutFooterHeight : 0f);
for (int i = 0; i < _sections.Count; i++)
float itemsAreaTop = flyoutBounds.Top + headerHeight;
float itemsAreaBottom = flyoutBounds.Bottom - footerHeight;
// Only check items if tap is in items area
if (e.Y >= itemsAreaTop && e.Y < itemsAreaBottom)
{
if (e.Y >= itemY && e.Y < itemY + itemHeight)
// Apply scroll offset to find which item was tapped
float itemY = itemsAreaTop - _flyoutScrollOffset;
float itemHeight = 48f;
for (int i = 0; i < _sections.Count; i++)
{
NavigateToSection(i, 0);
FlyoutIsPresented = false;
e.Handled = true;
return;
if (e.Y >= itemY && e.Y < itemY + itemHeight)
{
NavigateToSection(i, 0);
FlyoutIsPresented = false;
_flyoutScrollOffset = 0; // Reset scroll when closing
e.Handled = true;
return;
}
itemY += itemHeight;
}
itemY += itemHeight;
}
}
else if (FlyoutIsPresented)
@@ -1138,13 +1212,14 @@ public class SkiaShell : SkiaLayoutView
if (flyoutBounds.Contains(e.X, e.Y))
{
float headerHeight = FlyoutHeaderView != null ? FlyoutHeaderHeight : 0f;
float footerHeight = !string.IsNullOrEmpty(FlyoutFooterText) ? FlyoutFooterHeight : 0f;
float footerHeight = FlyoutFooterView != null ? FlyoutFooterHeight :
(!string.IsNullOrEmpty(FlyoutFooterText) ? FlyoutFooterHeight : 0f);
float itemHeight = 48f;
float totalItemsHeight = _sections.Count * itemHeight;
float viewableHeight = flyoutBounds.Height - headerHeight - footerHeight;
float maxScroll = Math.Max(0f, totalItemsHeight - viewableHeight);
_flyoutScrollOffset -= e.DeltaY * 30f;
_flyoutScrollOffset += e.DeltaY * 30f;
_flyoutScrollOffset = Math.Max(0f, Math.Min(_flyoutScrollOffset, maxScroll));
Invalidate();
e.Handled = true;

BIN
assets/logo_only.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

44
assets/logo_only.svg Normal file
View File

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="904px" height="904px" viewBox="0 0 904 904" style="enable-background:new 0 0 904 904;" xml:space="preserve">
<path style="fill:#1B79C4;" d="M352.47,305.72c2.59,0.01,5.18,0,7.77-0.02c15.57-0.02,30.94,1.71,46.17,5.54
c0.94,0.23,1.88,0.46,2.85,0.7c21.6,5.47,42.63,13.46,63.64,21.34c26.31,9.85,54.17,20.02,82.04,20.19c0.7,0.01,1.41,0.01,2.13,0.02
c21.87,0.24,21.87,0.24,43.52-2.93c1.15-0.26,1.15-0.26,2.32-0.53c27.81-6.62,56.02-18.76,79.07-38.33
c2.47-1.99,2.47-1.99,4.04-1.99c0.15,9.24,0.26,18.48,0.32,27.73c0.03,4.29,0.08,8.58,0.15,12.88c0.07,4.14,0.11,8.29,0.12,12.43
c0.01,1.58,0.03,3.16,0.07,4.74c0.25,12.36,0.25,12.36-2.02,16.31c-1.58,1.62-3.07,2.82-4.91,4c-0.75,0.63-1.49,1.27-2.26,1.92
c-2.37,1.8-4.75,3.58-7.15,5.34c-0.86,0.63-1.72,1.27-2.61,1.92c-24.4,17.65-51.89,29.41-80.47,33.48
c-0.54,0.09-1.08,0.17-1.64,0.26c-7.03,0.98-14.12,0.87-21.19,0.88c-0.7,0-1.4,0-2.12,0c-11.18-0.01-22.02-0.68-33.05-2.95
c-0.73-0.14-1.47-0.28-2.22-0.43c-21.91-4.28-43.2-12.21-64.33-20.02c-68.48-25.32-136.76-38.11-203.72,1.23
c-8.4,5.1-16.65,10.72-24.29,17.22c-2.49,2-2.49,2-4.05,2c-0.24-9.43-0.42-18.86-0.53-28.29c-0.05-4.38-0.13-8.76-0.24-13.14
c-0.11-4.23-0.17-8.46-0.2-12.7c-0.02-1.61-0.06-3.22-0.11-4.83c-0.4-12.22-0.4-12.22,2.05-16.13c2.73-3.18,5.86-5.34,9.22-7.53
c1.55-1.17,3.1-2.34,4.65-3.51c1.55-1.09,3.1-2.17,4.66-3.24c0.84-0.58,1.68-1.16,2.55-1.75c20.5-13.88,42.33-23.81,65.73-28.72
c0.57-0.12,1.13-0.24,1.72-0.36C330.94,306.24,341.52,305.65,352.47,305.72z"/>
<path style="fill:#1D5DB3;" d="M462.25,230.05c36.11,13.71,36.11,13.71,73.29,22.46c0.56,0.1,1.12,0.19,1.7,0.29
c48.86,8.29,104.44-2.97,144.83-37.25c1.6-1.17,1.6-1.17,3.95-1.17c0.2,8.99,0.35,17.98,0.45,26.97c0.04,4.18,0.1,8.35,0.2,12.52
c0.09,4.03,0.15,8.06,0.17,12.1c0.01,1.54,0.05,3.07,0.09,4.6c0.35,12.01,0.35,12.01-2.78,16.23c-2.19,1.87-4.33,3.33-6.76,4.75
c-1.08,0.8-2.14,1.61-3.2,2.44c-0.97,0.71-1.95,1.4-2.92,2.1c-0.54,0.38-1.07,0.76-1.62,1.16c-1.09,0.77-2.17,1.54-3.26,2.31
c-1.39,0.97-2.76,1.96-4.14,2.95c-20.16,13.99-43.31,22.55-66.36,27.18c-0.56,0.11-1.11,0.23-1.69,0.34
c-6.97,1.38-13.98,2.08-21.04,2.38c-0.91,0.04-0.91,0.04-1.83,0.08c-37.4,1.35-72.7-11.12-107.89-24.14
c-69.35-25.65-137.32-37.43-204.66,2.34c-8.73,5.24-16.85,10.97-24.57,18.06c-1.19,0.94-1.19,0.94-2.76,0.94
c-0.22-8.72-0.39-17.44-0.49-26.16c-0.05-4.05-0.12-8.1-0.22-12.15c-0.1-3.92-0.16-7.83-0.18-11.74c-0.02-1.49-0.05-2.97-0.1-4.46
c-0.37-11.31-0.37-11.31,1.91-15.08c2.5-3.08,5.41-5.32,8.49-7.57c1.18-1.01,2.35-2.02,3.51-3.05
C312.28,194.21,387.12,201.79,462.25,230.05z"/>
<path style="fill:#0F839E;" d="M452.04,425.6c4.85,1.82,9.72,3.61,14.58,5.4c1.43,0.52,1.43,0.52,2.88,1.06
c23.64,8.69,47.6,16.84,72.3,20.19c0.93,0.13,0.93,0.13,1.88,0.26c6.69,0.82,13.39,0.83,20.11,0.82c0.61,0,1.22,0,1.85,0
c8.87-0.02,17.54-0.33,26.32-1.99c1.01-0.16,2.02-0.33,3.05-0.5c30.94-5.41,63.41-19.49,88.12-42.05c1.31-1.03,1.31-1.03,2.88-1.03
c0.22,9.21,0.39,18.42,0.49,27.63c0.05,4.28,0.11,8.55,0.22,12.83c0.1,4.13,0.16,8.26,0.18,12.4c0.02,1.57,0.05,3.15,0.1,4.72
c0.38,12.28,0.38,12.28-3.01,16.87c-2.39,2.1-4.75,3.8-7.39,5.45c-1.37,1.03-2.73,2.07-4.08,3.12c-1.31,0.95-2.63,1.9-3.96,2.83
c-0.71,0.5-1.42,1.01-2.15,1.53c-6.11,4.29-12.31,8.14-18.81,11.58c-0.6,0.32-1.2,0.65-1.82,0.98
c-36.64,19.49-78.25,26.49-118.1,18.09c-0.81-0.16-1.63-0.32-2.46-0.49c-23.79-4.8-46.79-13.74-69.75-22.22
c-29.8-11-61.27-21.77-92.8-21.96c-1.03-0.01-1.03-0.01-2.08-0.02c-2.2-0.02-4.41-0.02-6.61-0.02c-1.13,0-1.13,0-2.29,0
c-11.52,0.01-22.71,0.52-34.06,2.95c-1.12,0.23-1.12,0.23-2.26,0.46c-19.2,3.95-37.33,10.82-54.96,20.42
c-0.88,0.47-0.88,0.47-1.77,0.95c-9.51,5.14-18.5,11.37-27.23,18.11c-1.5-1.74-0.92-4.89-0.93-7.19c-0.01-0.66-0.01-1.31-0.02-1.99
c-0.02-2.18-0.03-4.37-0.04-6.55c0-0.75-0.01-1.49-0.01-2.26c-0.02-3.94-0.04-7.89-0.05-11.83c-0.01-4.07-0.05-8.15-0.09-12.22
c-0.03-3.13-0.04-6.26-0.04-9.39c-0.01-1.5-0.02-3-0.04-4.5c-0.03-2.1-0.03-4.21-0.02-6.31c-0.01-1.2-0.01-2.4-0.02-3.63
c0.6-3.91,1.8-5.17,4.39-7.67c0.56-0.54,1.12-1.09,1.69-1.65C300.38,393.44,379.63,398.41,452.04,425.6z"/>
<path style="fill:#0F839E;" d="M230.65,512.16c0.26,0,0.52,0,0.78,0c0,3.36,0,6.72,0,10.19c0.78,0.26,1.55,0.52,2.35,0.78
c-0.78,0.52-1.55,1.04-2.35,1.57c-0.78-0.78-0.78-0.78-0.86-3.43c0-1.09,0.01-2.19,0.03-3.28c0-0.56,0.01-1.11,0.01-1.69
C230.62,514.92,230.63,513.54,230.65,512.16z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB