Archived topic
Can't increase size of svg file
7 replies · Started by Leon on June 6, 2020
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
If you can't see the image, here is the link: https://ibb.co/JpH6ZFf
Hi there,
Does the icon size option not work for you?
https://www.screencast.com/t/bbX8XeCCr9
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.
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 :)
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
Awesome, thanks for sharing what you did :)
Thank you for the great support Tom.