[Resolved] Can’t increase size of svg file

[Leon]

Hello,

I’m using the dev layout from site library. I tried to change an icon, but when I upload it, it looks much smaller than those in the default layout.

Here’s a screenshot:

Here’s the original icon svg html:
<svg xml:space="preserve" style="enable-background:new 0 0 60 60.526;" viewBox="0 0 60 60.526" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="Layer_1" version="1.1"> <g> <g> <g> <path d="M55.395,23.881v-5.658c0-1.118-0.855-1.974-1.974-1.974H36.842v-3.158 c2.762-0.855,4.736-3.421,4.736-6.381c0-3.684-3.026-6.711-6.71-6.711s-6.711,3.026-6.711,6.711c0,3.026,1.974,5.592,4.737,6.381 v3.158H16.315c-1.118,0-1.974,0.855-1.974,1.974v5.658c-2.697,0.855-4.605,3.421-4.605,6.382c0,2.96,1.907,5.461,4.539,6.316 v3.881H6.579c-1.119,0-1.974,0.855-1.974,1.974v5C1.908,48.289,0,50.855,0,53.816c0,3.684,3.026,6.711,6.711,6.711 s6.71-3.026,6.71-6.711c0-3.092-2.04-5.658-4.868-6.448v-2.961h15.394v2.961c-2.829,0.789-4.869,3.355-4.869,6.448 c0,3.684,3.026,6.711,6.711,6.711c3.684,0,6.711-3.026,6.711-6.711c0-2.961-1.908-5.461-4.605-6.382v-5 c0-1.118-0.855-1.974-1.974-1.974h-7.698v-3.749c2.829-0.79,4.934-3.355,4.934-6.448c0-3.092-2.04-5.658-4.869-6.448v-3.618 h14.606v3.684c-2.763,0.855-4.737,3.421-4.737,6.382c0,3.684,3.026,6.711,6.711,6.711c3.684,0,6.71-3.026,6.71-6.711 c0-3.026-1.974-5.592-4.736-6.382v-3.684h14.605v3.618c-2.829,0.789-4.869,3.355-4.869,6.448c0,3.684,3.026,6.711,6.711,6.711 c3.684,0,6.711-3.026,6.711-6.711C60,27.303,58.092,24.802,55.395,23.881L55.395,23.881z M34.868,3.947 c1.513,0,2.763,1.25,2.763,2.763s-1.25,2.763-2.763,2.763s-2.763-1.25-2.763-2.763C32.105,5.198,33.355,3.947,34.868,3.947 L34.868,3.947z M9.474,53.816c0,1.513-1.25,2.763-2.763,2.763s-2.763-1.25-2.763-2.763s1.25-2.763,2.763-2.763 C8.224,51.052,9.474,52.302,9.474,53.816L9.474,53.816z M25.789,56.579c-1.513,0-2.763-1.25-2.763-2.763s1.25-2.763,2.763-2.763 s2.763,1.25,2.763,2.763S27.303,56.579,25.789,56.579L25.789,56.579z M19.21,30.263c0,1.513-1.25,2.763-2.763,2.763 s-2.763-1.25-2.763-2.763s1.25-2.763,2.763-2.763S19.21,28.75,19.21,30.263L19.21,30.263z M34.868,33.026 c-1.513,0-2.763-1.25-2.763-2.763s1.25-2.763,2.763-2.763s2.763,1.25,2.763,2.763C37.632,31.776,36.382,33.026,34.868,33.026 L34.868,33.026z M53.289,33.026c-1.513,0-2.763-1.25-2.763-2.763s1.25-2.763,2.763-2.763s2.763,1.25,2.763,2.763 C56.052,31.776,54.802,33.026,53.289,33.026L53.289,33.026z" id="SVGID_1_"></path> </g> <g> <defs> <path d="M55.395,23.881v-5.658c0-1.118-0.855-1.974-1.974-1.974H36.842v-3.158 c2.762-0.855,4.736-3.421,4.736-6.381c0-3.684-3.026-6.711-6.71-6.711s-6.711,3.026-6.711,6.711 c0,3.026,1.974,5.592,4.737,6.381v3.158H16.315c-1.118,0-1.974,0.855-1.974,1.974v5.658c-2.697,0.855-4.605,3.421-4.605,6.382 c0,2.96,1.907,5.461,4.539,6.316v3.881H6.579c-1.119,0-1.974,0.855-1.974,1.974v5C1.908,48.289,0,50.855,0,53.816 c0,3.684,3.026,6.711,6.711,6.711s6.71-3.026,6.71-6.711c0-3.092-2.04-5.658-4.868-6.448v-2.961h15.394v2.961 c-2.829,0.789-4.869,3.355-4.869,6.448c0,3.684,3.026,6.711,6.711,6.711c3.684,0,6.711-3.026,6.711-6.711 c0-2.961-1.908-5.461-4.605-6.382v-5c0-1.118-0.855-1.974-1.974-1.974h-7.698v-3.749c2.829-0.79,4.934-3.355,4.934-6.448 c0-3.092-2.04-5.658-4.869-6.448v-3.618h14.606v3.684c-2.763,0.855-4.737,3.421-4.737,6.382c0,3.684,3.026,6.711,6.711,6.711 c3.684,0,6.71-3.026,6.71-6.711c0-3.026-1.974-5.592-4.736-6.382v-3.684h14.605v3.618c-2.829,0.789-4.869,3.355-4.869,6.448 c0,3.684,3.026,6.711,6.711,6.711c3.684,0,6.711-3.026,6.711-6.711C60,27.303,58.092,24.802,55.395,23.881L55.395,23.881z M34.868,3.947c1.513,0,2.763,1.25,2.763,2.763s-1.25,2.763-2.763,2.763s-2.763-1.25-2.763-2.763 C32.105,5.198,33.355,3.947,34.868,3.947L34.868,3.947z M9.474,53.816c0,1.513-1.25,2.763-2.763,2.763s-2.763-1.25-2.763-2.763 s1.25-2.763,2.763-2.763C8.224,51.052,9.474,52.302,9.474,53.816L9.474,53.816z M25.789,56.579c-1.513,0-2.763-1.25-2.763-2.763 s1.25-2.763,2.763-2.763s2.763,1.25,2.763,2.763S27.303,56.579,25.789,56.579L25.789,56.579z M19.21,30.263 c0,1.513-1.25,2.763-2.763,2.763s-2.763-1.25-2.763-2.763s1.25-2.763,2.763-2.763S19.21,28.75,19.21,30.263L19.21,30.263z M34.868,33.026c-1.513,0-2.763-1.25-2.763-2.763s1.25-2.763,2.763-2.763s2.763,1.25,2.763,2.763 C37.632,31.776,36.382,33.026,34.868,33.026L34.868,33.026z M53.289,33.026c-1.513,0-2.763-1.25-2.763-2.763 s1.25-2.763,2.763-2.763s2.763,1.25,2.763,2.763C56.052,31.776,54.802,33.026,53.289,33.026L53.289,33.026z" id="SVGID_2_"></path> </defs> <clipPath id="SVGID_3_"> </clipPath> </g> </g> </g> </svg>

Here’s my new icon svg html:
<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" viewBox="0 0 60 60.526" style="enable-background:new 0 0 60 60.526;" xml:space="preserve"> <g class="shadow"><g stroke="none" fill-rule="evenodd" fill="none"> </g><g stroke="none" transform="translate(20 20)" fill="none"> <path stroke="none" fill="none" d="M7.6 3.5C7.2 3.5 6.9 3.2 6.9 2.8 6.9 2.3 7.2 2 7.6 2 8 2 8.3 2.3 8.3 2.7 8.3 3.1 8 3.5 7.6 3.5L7.6 3.5zM10.9 3.5C10.5 3.5 10.2 3.2 10.2 2.8 10.2 2.4 10.5 2.1 10.9 2.1 11.3 2.1 11.6 2.4 11.6 2.8 11.7 3.1 11.3 3.5 10.9 3.5L10.9 3.5zM4.3 3.5C3.9 3.5 3.6 3.2 3.6 2.8 3.6 2.3 3.9 2 4.3 2 4.7 2 5 2.3 5 2.7 5.1 3.1 4.7 3.5 4.3 3.5L4.3 3.5z"></path> <polygon stroke="none" fill="none" points="18.7 15 19.1 11.2 11.6 11.2 12 15"></polygon> <circle stroke="none" fill="none" r=".4" cy="17.3" cx="12.3"></circle> <circle stroke="none" fill="none" r=".4" cy="17.3" cx="18.1"></circle> <path stroke="none" fill="none" d="M29.4,0 L0.6,0 C0.3,0 0,0.3 0,0.6 L0,29.4 C0,29.7 0.3,30 0.6,30 L29.4,30 C29.7,30 30,29.7 30,29.4 L30,0.6 C30,0.3 29.7,0 29.4,0 L29.4,0 Z M7.5,24.4 L5.2,26.7 C5.1,26.8 4.9,26.9 4.8,26.9 C4.6,26.9 4.5,26.8 4.4,26.7 L3,25.4 C2.8,25.2 2.8,24.8 3,24.5 C3.2,24.3 3.6,24.3 3.9,24.5 L4.8,25.4 L6.6,23.6 C6.8,23.4 7.2,23.4 7.5,23.6 C7.8,23.8 7.8,24.2 7.5,24.4 L7.5,24.4 Z M7.5,20.7 L5.2,23 C5.1,23.1 4.9,23.2 4.8,23.2 C4.6,23.2 4.5,23.1 4.4,23 L3,21.6 C2.8,21.4 2.8,21 3,20.7 C3.2,20.5 3.6,20.5 3.9,20.7 L4.8,21.6 L6.6,19.8 C6.8,19.6 7.2,19.6 7.5,19.8 C7.8,20 7.8,20.4 7.5,20.7 L7.5,20.7 Z M7.9,10.2 C7.5,10.2 7.2,10 7.2,9.7 L7,8.2 C7,8 7,7.8 7.2,7.7 C7.3,7.6 7.5,7.5 7.7,7.5 L10.6,7.5 C10.9,7.5 11.2,7.7 11.2,8.1 L11.4,10 L19.8,10 C20,10 20.1,10.1 20.3,10.2 C20.4,10.3 20.5,10.5 20.5,10.7 L19.9,15.7 C19.9,16 19.7,16.2 19.4,16.2 C19.6,16.5 19.8,16.9 19.8,17.3 C19.8,18.2 19,19 18.1,19 C17.2,19 16.4,18.2 16.4,17.3 C16.4,16.9 16.5,16.5 16.8,16.3 L13.6,16.3 C13.8,16.6 14,16.9 14,17.3 C14,18.2 13.2,19 12.3,19 C11.4,19 10.6,18.2 10.6,17.3 C10.6,16.8 10.8,16.4 11.1,16.1 C11,16 10.9,15.9 10.9,15.7 L10.3,10.7 C10.3,10.7 10.3,10.7 10.3,10.6 L10,8.8 L8.4,8.8 L8.5,9.5 C8.5,9.8 8.3,10.1 7.9,10.2 L7.9,10.2 Z M26.2,26.2 L10,26.2 C9.7,26.2 9.4,25.9 9.4,25.6 C9.4,25.3 9.7,25 10,25 L26.2,25 C26.5,25 26.8,25.3 26.8,25.6 C26.8,25.9 26.6,26.2 26.2,26.2 L26.2,26.2 Z M26.2,22.5 L10,22.5 C9.7,22.5 9.4,22.2 9.4,21.9 C9.4,21.6 9.7,21.3 10,21.3 L26.2,21.3 C26.5,21.3 26.8,21.6 26.8,21.9 C26.8,22.2 26.6,22.5 26.2,22.5 L26.2,22.5 Z M28.8,5 L1.2,5 L1.2,1.2 L28.7,1.2 L28.7,5 L28.8,5 Z"></path> </g></g><g class="clone"><g class="main-fill main-stroke" style="stroke-width: 2;" stroke="none" fill-rule="evenodd" fill="none"> </g><g class="main-fill main-stroke" style="stroke-width: 2;" stroke="none" transform="translate(20 20)" fill="none"> <path class="main-fill main-stroke" style="stroke-width: 2;" stroke="none" fill="none" d="M7.6 3.5C7.2 3.5 6.9 3.2 6.9 2.8 6.9 2.3 7.2 2 7.6 2 8 2 8.3 2.3 8.3 2.7 8.3 3.1 8 3.5 7.6 3.5L7.6 3.5zM10.9 3.5C10.5 3.5 10.2 3.2 10.2 2.8 10.2 2.4 10.5 2.1 10.9 2.1 11.3 2.1 11.6 2.4 11.6 2.8 11.7 3.1 11.3 3.5 10.9 3.5L10.9 3.5zM4.3 3.5C3.9 3.5 3.6 3.2 3.6 2.8 3.6 2.3 3.9 2 4.3 2 4.7 2 5 2.3 5 2.7 5.1 3.1 4.7 3.5 4.3 3.5L4.3 3.5z"></path> <polygon class="main-fill main-stroke" style="stroke-width: 2;" stroke="none" fill="none" points="18.7 15 19.1 11.2 11.6 11.2 12 15"></polygon> <circle class="main-fill main-stroke" style="stroke-width: 2;" stroke="none" fill="none" r=".4" cy="17.3" cx="12.3"></circle> <circle class="main-fill main-stroke" style="stroke-width: 2;" stroke="none" fill="none" r=".4" cy="17.3" cx="18.1"></circle> <path class="main-fill main-stroke" style="stroke-width: 2;" stroke="none" fill="none" d="M29.4,0 L0.6,0 C0.3,0 0,0.3 0,0.6 L0,29.4 C0,29.7 0.3,30 0.6,30 L29.4,30 C29.7,30 30,29.7 30,29.4 L30,0.6 C30,0.3 29.7,0 29.4,0 L29.4,0 Z M7.5,24.4 L5.2,26.7 C5.1,26.8 4.9,26.9 4.8,26.9 C4.6,26.9 4.5,26.8 4.4,26.7 L3,25.4 C2.8,25.2 2.8,24.8 3,24.5 C3.2,24.3 3.6,24.3 3.9,24.5 L4.8,25.4 L6.6,23.6 C6.8,23.4 7.2,23.4 7.5,23.6 C7.8,23.8 7.8,24.2 7.5,24.4 L7.5,24.4 Z M7.5,20.7 L5.2,23 C5.1,23.1 4.9,23.2 4.8,23.2 C4.6,23.2 4.5,23.1 4.4,23 L3,21.6 C2.8,21.4 2.8,21 3,20.7 C3.2,20.5 3.6,20.5 3.9,20.7 L4.8,21.6 L6.6,19.8 C6.8,19.6 7.2,19.6 7.5,19.8 C7.8,20 7.8,20.4 7.5,20.7 L7.5,20.7 Z M7.9,10.2 C7.5,10.2 7.2,10 7.2,9.7 L7,8.2 C7,8 7,7.8 7.2,7.7 C7.3,7.6 7.5,7.5 7.7,7.5 L10.6,7.5 C10.9,7.5 11.2,7.7 11.2,8.1 L11.4,10 L19.8,10 C20,10 20.1,10.1 20.3,10.2 C20.4,10.3 20.5,10.5 20.5,10.7 L19.9,15.7 C19.9,16 19.7,16.2 19.4,16.2 C19.6,16.5 19.8,16.9 19.8,17.3 C19.8,18.2 19,19 18.1,19 C17.2,19 16.4,18.2 16.4,17.3 C16.4,16.9 16.5,16.5 16.8,16.3 L13.6,16.3 C13.8,16.6 14,16.9 14,17.3 C14,18.2 13.2,19 12.3,19 C11.4,19 10.6,18.2 10.6,17.3 C10.6,16.8 10.8,16.4 11.1,16.1 C11,16 10.9,15.9 10.9,15.7 L10.3,10.7 C10.3,10.7 10.3,10.7 10.3,10.6 L10,8.8 L8.4,8.8 L8.5,9.5 C8.5,9.8 8.3,10.1 7.9,10.2 L7.9,10.2 Z M26.2,26.2 L10,26.2 C9.7,26.2 9.4,25.9 9.4,25.6 C9.4,25.3 9.7,25 10,25 L26.2,25 C26.5,25 26.8,25.3 26.8,25.6 C26.8,25.9 26.6,26.2 26.2,26.2 L26.2,26.2 Z M26.2,22.5 L10,22.5 C9.7,22.5 9.4,22.2 9.4,21.9 C9.4,21.6 9.7,21.3 10,21.3 L26.2,21.3 C26.5,21.3 26.8,21.6 26.8,21.9 C26.8,22.2 26.6,22.5 26.2,22.5 L26.2,22.5 Z M28.8,5 L1.2,5 L1.2,1.2 L28.7,1.2 L28.7,5 L28.8,5 Z"></path> </g></g><g class="base"><g class="secondary-fill" stroke="none" fill-rule="evenodd" fill="none"> </g><g class="secondary-fill" stroke="none" transform="translate(20 20)" fill="none"> <path class="secondary-fill" stroke="none" fill="none" d="M7.6 3.5C7.2 3.5 6.9 3.2 6.9 2.8 6.9 2.3 7.2 2 7.6 2 8 2 8.3 2.3 8.3 2.7 8.3 3.1 8 3.5 7.6 3.5L7.6 3.5zM10.9 3.5C10.5 3.5 10.2 3.2 10.2 2.8 10.2 2.4 10.5 2.1 10.9 2.1 11.3 2.1 11.6 2.4 11.6 2.8 11.7 3.1 11.3 3.5 10.9 3.5L10.9 3.5zM4.3 3.5C3.9 3.5 3.6 3.2 3.6 2.8 3.6 2.3 3.9 2 4.3 2 4.7 2 5 2.3 5 2.7 5.1 3.1 4.7 3.5 4.3 3.5L4.3 3.5z"></path> <polygon class="secondary-fill" stroke="none" fill="none" points="18.7 15 19.1 11.2 11.6 11.2 12 15"></polygon> <circle class="secondary-fill" stroke="none" fill="none" r=".4" cy="17.3" cx="12.3"></circle> <circle class="secondary-fill" stroke="none" fill="none" r=".4" cy="17.3" cx="18.1"></circle> <path class="secondary-fill" stroke="none" fill="none" d="M29.4,0 L0.6,0 C0.3,0 0,0.3 0,0.6 L0,29.4 C0,29.7 0.3,30 0.6,30 L29.4,30 C29.7,30 30,29.7 30,29.4 L30,0.6 C30,0.3 29.7,0 29.4,0 L29.4,0 Z M7.5,24.4 L5.2,26.7 C5.1,26.8 4.9,26.9 4.8,26.9 C4.6,26.9 4.5,26.8 4.4,26.7 L3,25.4 C2.8,25.2 2.8,24.8 3,24.5 C3.2,24.3 3.6,24.3 3.9,24.5 L4.8,25.4 L6.6,23.6 C6.8,23.4 7.2,23.4 7.5,23.6 C7.8,23.8 7.8,24.2 7.5,24.4 L7.5,24.4 Z M7.5,20.7 L5.2,23 C5.1,23.1 4.9,23.2 4.8,23.2 C4.6,23.2 4.5,23.1 4.4,23 L3,21.6 C2.8,21.4 2.8,21 3,20.7 C3.2,20.5 3.6,20.5 3.9,20.7 L4.8,21.6 L6.6,19.8 C6.8,19.6 7.2,19.6 7.5,19.8 C7.8,20 7.8,20.4 7.5,20.7 L7.5,20.7 Z M7.9,10.2 C7.5,10.2 7.2,10 7.2,9.7 L7,8.2 C7,8 7,7.8 7.2,7.7 C7.3,7.6 7.5,7.5 7.7,7.5 L10.6,7.5 C10.9,7.5 11.2,7.7 11.2,8.1 L11.4,10 L19.8,10 C20,10 20.1,10.1 20.3,10.2 C20.4,10.3 20.5,10.5 20.5,10.7 L19.9,15.7 C19.9,16 19.7,16.2 19.4,16.2 C19.6,16.5 19.8,16.9 19.8,17.3 C19.8,18.2 19,19 18.1,19 C17.2,19 16.4,18.2 16.4,17.3 C16.4,16.9 16.5,16.5 16.8,16.3 L13.6,16.3 C13.8,16.6 14,16.9 14,17.3 C14,18.2 13.2,19 12.3,19 C11.4,19 10.6,18.2 10.6,17.3 C10.6,16.8 10.8,16.4 11.1,16.1 C11,16 10.9,15.9 10.9,15.7 L10.3,10.7 C10.3,10.7 10.3,10.7 10.3,10.6 L10,8.8 L8.4,8.8 L8.5,9.5 C8.5,9.8 8.3,10.1 7.9,10.2 L7.9,10.2 Z M26.2,26.2 L10,26.2 C9.7,26.2 9.4,25.9 9.4,25.6 C9.4,25.3 9.7,25 10,25 L26.2,25 C26.5,25 26.8,25.3 26.8,25.6 C26.8,25.9 26.6,26.2 26.2,26.2 L26.2,26.2 Z M26.2,22.5 L10,22.5 C9.7,22.5 9.4,22.2 9.4,21.9 C9.4,21.6 9.7,21.3 10,21.3 L26.2,21.3 C26.5,21.3 26.8,21.6 26.8,21.9 C26.8,22.2 26.6,22.5 26.2,22.5 L26.2,22.5 Z M28.8,5 L1.2,5 L1.2,1.2 L28.7,1.2 L28.7,5 L28.8,5 Z"></path> </g></g><style> .main-fill {fill: #444fe5;} .main-stroke {stroke: #444fe5;} .secondary-fill {fill: #f7f9ff;} .secondary-stroke {stroke: #f7f9ff;} .main-fill--darken {fill: #1b26c2;} .main-stroke--darken {stroke: #1b26c2;} .secondary-fill--darken {fill: #aac0ff;} .secondary-stroke--darken {stroke: #aac0ff;} .main-fill--darkener {fill: #151d95;} .main-stroke--darkener {stroke: #151d95;} .secondary-fill--darkener {fill: #7799ff;} .secondary-stroke--darkener {stroke: #7799ff;} </style></svg>

I tried to change the width and height, viewbox to the same as the original, but it’s still small.

Can you help on this please?

Thank you
Leon

[Leon]

If you can’t see the image, here is the link: https://ibb.co/JpH6ZFf

[Leo]

Hi there,

Does the icon size option not work for you?
https://www.screencast.com/t/bbX8XeCCr9

[Leon]

Hi Leo,

It doesn’t work well. Even if I set a large number that’s many times of it, the icon size increase only a little.

[Tom]

Hi there,

You’ll need to trim the SVG so the viewbox doesn’t have so much whitespace around it. If you Google “SVG trim whitespace” you should find some solutions 🙂

[Leon]

Hi Tom

I solved the problem by the method and thank you for pointing me to the right direction.

Basically I used Inkscape and a website: https://www.svgminify.com/

Step:
Open svg file in Inkscape, Select image area, Edit>Resize page to selection>save file.
Then, upload the file to the url above to minify and save it.

That’s all I did.

Thank you
Leon

[Tom]

Awesome, thanks for sharing what you did 🙂

[Leon]

Thank you for the great support Tom.

[Author]

Posts