[Resolved] Can’t increase size of svg file

Home Forums Support Can’t increase size of svg file

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1316707
    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:null

    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

    #1316710
    Leon

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

    #1316999
    Leo
    Staff
    Customer Support

    Hi there,

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

    #1317082
    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.

    #1317341
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1318675
    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

    #1319516
    Tom
    Lead Developer
    Lead Developer

    Awesome, thanks for sharing what you did 🙂

    #1319590
    Leon

    Thank you for the great support Tom.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.