- This topic has 7 replies, 3 voices, and was last updated 3 years, 10 months ago by Leon.
-
AuthorPosts
-
June 6, 2020 at 6:05 am #1316707Leon
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
LeonJune 6, 2020 at 6:08 am #1316710LeonIf you can’t see the image, here is the link: https://ibb.co/JpH6ZFf
June 6, 2020 at 9:03 am #1316999LeoStaffCustomer SupportHi there,
Does the icon size option not work for you?
https://www.screencast.com/t/bbX8XeCCr9June 6, 2020 at 10:03 am #1317082LeonHi 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.
June 6, 2020 at 4:34 pm #1317341TomLead DeveloperLead DeveloperHi 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 ๐
June 7, 2020 at 11:40 pm #1318675LeonHi 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
LeonJune 8, 2020 at 9:36 am #1319516TomLead DeveloperLead DeveloperAwesome, thanks for sharing what you did ๐
June 8, 2020 at 10:27 am #1319590LeonThank you for the great support Tom.
-
AuthorPosts
- You must be logged in to reply to this topic.