Search code examples
androidsvgimageviewpaddingcrop

Delete padding or Force fitting or Delete empty space from square Vector asset to Fit a Rectangular button?

I'm trying to adjust the all_inclusive svg image to my rectangular button. The shape itself is rectangular as well but the vector asset is square (24x24) with white spaces above and under the shape. These spaces force the shape itself to be very small. How to make the all inclusive svg rectangular by deleting that padding on top and on bottom?

annoying_infinity

In this picture the image is set to fit the guidelines on the left, top and right side: 

    <ImageView
        android:id="@+id/imgInfinity"
        app:srcCompat="@drawable/ic_infinity"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintTop_toTopOf="0.75"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="0.75"
        app:layout_constraintEnd_toEndOf="0.25" />

Things that did not work:

  • pivot vector asset with a group -> I just cant figure out the dimensions without messing up the original shape. Same storty with scaleX/Y or translateX/Y. I got it to work on my other buttons with simpler shapes though.
  • adjusting android:viewportheight or android:height -> it deshapes the picture to a weird form
  • crop svg online --> as Googles original SVG pathData is already 580 characters long, cropping tools only make it to large for android to deal with (above 1000 charactes)
  • crop svg picture with word and extract from zip file-> it doesnt compress svg images so it stays rectangular with the white spaces above and under.
  • Set a seperate horizontal guideline for the top of the picture. It does the trick but one or multiple guidelines for each image gets very messy. There must be a better way, right?..

ACCEPTED SOLUTION (edit with InkShape):

  • Install InkShape
  • Open SVG
  • Click on picture once to select it
  • Go to File-> Document Properties and click 'Resize pager to drawing or selection' (this button is hidden on the first tab, click +Resize page to content to show the option);
  • Save
  • extract pathData and (viewport)width/heights from saved file.
Solution

  • Update using Inkscape version 1.1:

    Unfortunately, the latest version of Inkscape (1.1) no longer will import a vector drawable file directly, so the original answer is not 100% correct. That answer will probably work with other editors that can handle vector drawable files.

    Here is an update to that answer that works with later versions of Inkscape to remove all padding from a vector drawable.

    Convert vector drawable to scaled vector graphic (SVG):

    • Open Alex Lockwood's Shape Shifter site
    • Drag the vector drawable file from Android Studio to Shape Shifter.
    • Export the image as an SVG to a local file

    Now that we have an SVG file, we can edit it with Inkscape:

    • Install Inkscape if not already installed.
    • Open SVG file in Inkscape.
    • Click on the image to select it.
    • Resize the image to the selection (Shift+Ctrl+R or Edit->Resize Page to Selection). You can also specify an alternate size if you desire some padding.
    • Save the image as an SVG file.

    The image is now cropped in an SVG file. We need to convert it back to a vector drawable.

    • In Android Studio import the SVG file as a vector drawable. (File->New->Vector Asset) Asset Type = "Local file (SVG, PSD).

    Once imported, the vector drawable no longer has any padding.

    Use an image editor that can handle SVG files to crop the image. I used InkScape but there are others. Once the image is cropped, you can import it into Android Studio as an XML file.