Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Dharmesh 50 posts 210 karma points
    Apr 07, 2017 @ 06:31
    Dharmesh
    0

    Svg file with image cropper not working

    Hello

    I am trying to crop an svg file. but it does not crop svg images. I successfully cropped other types of images like png and jpg, Is there any other way of cropping svg file in umbraco ? Please help guys...

    Thanks
    Dharmesh

  • Dan Diplo 1554 posts 6205 karma points MVP 5x c-trib
    Apr 07, 2017 @ 11:37
    Dan Diplo
    0

    An SVG isn't a bitmap file it's a vector. I doesn't really make any sense to me to "crop" a vector, as it's essentially an XML file that defines points. I can't see any logical way you could crop a vector, and it's not something that is supported, I'm afraid.

  • Micha Somers 134 posts 597 karma points
    Apr 07, 2017 @ 12:50
    Micha Somers
    0

    Actually, I think it would be very useful if the image cropper would work on vector images as well ... especially for using a custom focal point.

    Unfortunately, it doesn't.

    Image Cropper is powered by ImageProcessor

    It's core supported formats are:

    • jpg
    • jpeg
    • bmp
    • gif
    • png
    • png8
    • tif
    • tiff

    So, you can't use Image Cropper for .svg files and have to find other ways, such as described in How to crop SVG file within HTML/CSS

  • Dharmesh 50 posts 210 karma points
    Apr 17, 2017 @ 13:49
    Dharmesh
    0

    Hello,

    I just wrote following code for getting width and height and applied it to svg:

                                string fileExtension = string.Empty;
                                string urlWithoutCrop = string.Empty;
                                int width = 0, height = 0;
                                string json = Convert.ToString(item.GetValue("icon")) ?? "";
                                string url = string.Empty;
                                if (!string.IsNullOrWhiteSpace(json))
                                {
                                    JObject imageData = JObject.Parse(json);
                                    url = imageData["src"].ToString();
                                    urlWithoutCrop = url;
                                    fileExtension = Path.GetExtension(url);
                                    if (String.IsNullOrEmpty("iconTextCrop") == false && imageData["crops"].Any(x => x["alias"].ToString().ToLower() == "iconTextCrop".ToLower()))
                                    {
                                        JToken crop = imageData["crops"].First(x => x["alias"].ToString().ToLower() == "iconTextCrop".ToLower());
                                        width = Convert.ToInt32(crop["width"]);
                                        height = Convert.ToInt32(crop["height"]);
    
                                        url = url.GetCropUrl(width: width, height: height, imageCropperValue: imageData.ToString(), cropAlias: "iconTextCrop");
                                    }
                                }
    

    Then just checked if svg file and gave attributes width and height:

    @if (fileExtension == ".svg") { <img src="@urlWithoutCrop" style="width: @(width + "px"); height: @(height + "px");" alt="" class="img-reponsive" /> } else { <img src="@url" alt="" class="img-reponsive" /> }

Please Sign in or register to post replies

Write your reply to:

Draft