Tips for resizing SVG when referencing another SVG file

In my project, I have incorporated inline SVG and now I am looking to adjust the width and height to create small icons without resizing the tags.

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: solid 1px;
}

svg.icon {
  border: solid 1px tomato;
  /**debug*/
  overflow: visible;
}

.icon use {
  border: solid 1px green;
}
<svg style="display: none;" viewBox="0 0 24 24" width="24" height="24">
  <defs>
      <g id="ico-and">
        <path d="M152.682,458.363c0,15.3,10.2,25.5,25.5,25.5h25.5v89.25c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-89.25    h51v89.25c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-89.25h25.5c15.3,0,25.5-10.2,25.5-25.5v-255h-306V458.363z     M88.932,203.363c-20.4,0-38.25,17.851-38.25,38.25v178.5c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-178.5    C127.182,221.213,109.332,203.363,88.932,203.363z M522.432,203.363c-20.4,0-38.25,17.851-38.25,38.25v178.5    c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-178.5C560.682,221.213,542.832,203.363,522.432,203.363z     M394.932,55.463l33.15-33.15c5.1-5.1,5.1-12.75,0-17.85c-5.101-5.101-12.75-5.101-17.851,0l-38.25,38.25    c-17.85-12.75-40.8-17.851-66.3-17.851s-48.45,5.101-68.85,15.3l-35.7-38.25c-5.1-2.55-15.3-2.55-20.4,0    c-2.55,5.101-2.55,15.301,0,20.4l33.15,33.15c-35.7,28.05-61.2,71.399-61.2,122.399h306    C458.682,126.863,433.182,80.963,394.932,55.463z M254.682,126.863h-25.5v-25.5h25.5V126.863z M382.182,126.863h-25.5v-25.5h25.5    V126.863z" >
      </g>    
  </defs>
</svg>

<div class="row">
  <svg class="icon" alt="SO" viewBox="0 0 24 24" width="24" height="24">
   <use xlink:href="#ico-and" viewBox="0 0 24 24" width="24" height="24"></use>
  </svg>
  <p>System</p>
</div>

https://codepen.io/chicoxin/pen/EpdMQj

htmlcsssvg

Answer №1

Please ensure to adjust the viewBox, as it is also incorrect in the initial SVG.

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: solid 1px;
}

svg.icon {
  border: solid 1px tomato;
  /**debug*/
  overflow: visible;
}

.icon use {
  border: solid 1px green;
}
<svg style="display:none" viewBox="0 0 600 600" width="24" height="24"> 
<defs>
<g id="ico-and" >
        <path  d="M152.682,458.363c0,15.3,10.2,25.5,25.5,25.5h25.5v89.25c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-89.25    h51v89.25c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-89.25h25.5c15.3,0,25.5-10.2,25.5-25.5v-255h-306V458.363z     M88.932,203.363c-20.4,0-38.25,17.851-38.25,38.25v178.5c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-178.5    C127.182,221.213,109.332,203.363,88.932,203.363z M522.432,203.363c-20.4,0-38.25,17.851-38.25,38.25v178.5    c0,20.4,17.85,38.25,38.25,38.25s38.25-17.85,38.25-38.25v-178.5C560.682,221.213,542.832,203.363,522.432,203.363z     M394.932,55.463l33.15-33.15c5.1-5.1,5.1-12.75,0-17.85c-5.101-5.101-12.75-5.101-17.851,0l-38.25,38.25    c-17.85-12.75-40.8-17.851-66.3-17.851s-48.45,5.101-68.85,15.3l-35.7-38.25c-5.1-2.55-15.3-2.55-20.4,0    c-2.55,5.101-2.55,15.301,0,20.4l33.15,33.15c-35.7,28.05-61.2,71.399-61.2,122.399h306    C458.682,126.863,433.182,80.963,394.932,55.463z M254.682,126.863h-25.5v-25.5h25.5V126.863z M382.182,126.863h-25.5v-25.5h25.5    V126.863z" />
      </g>    
      </defs>
</svg>

<div class="row">
  <svg class="icon" alt="SO" viewBox="0 0 600 600" width="24" height="24">
   <use xlink:href="#ico-and"></use>
  </svg>
  <p>System</p>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to dynamically update the value of a TextBoxFor in asp.net MVC when a text box value changes

I need some assistance with a specific topic. In my scenario, I have two textboxes on my view. I want the value generated in my controller to be applied to textbox2 when there is a change in textbox1. For instance, if I enter a username in textbox1, textb ...

javascripthtmlasp.netajaxasp.net-mvc

Uniform Fixed Width for Material UI Table Cells

Below is a Material UI Table with columns set to a fixed size of 205px each, and the table itself set to 100% width. However, when there isn't enough space available, the columns do not shrink according to the text inside them, remaining stuck at 205p ...

javascripthtmlcssreactjsmaterial-ui

Styling the scroll bar within a fixed parent container's inner div with CSS

Check out the JSBIN link here: JSBIN The modules container has a fixed height of 100%. I am attempting to make the list items scroll while keeping the search div fixed within the wrapper container, ensuring that the search bar remains visible at all times ...

css

Ensuring DIVs are completely contained within their parent DIV using Fullscreen CSS and a height of

I found a nearly-perfect design using the code below: https://i.sstatic.net/56i2E.png This code provides the layout mentioned: <!DOCTYPE html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://maxcdn. ...

htmlcss

Using an array in JavaScript to play a game of Rock, Paper, Scissors

Currently struggling with writing code for a Rock, Paper, Scissors game using javascript. Even though it's a common topic, I'm relatively new to this and couldn't find any resources that align with my use of arrays. I tried using an array to ...

javascripthtmlarrays

Attempting to evenly distribute images using CSS styling

I am attempting to design a slideshow with small images evenly distributed horizontally on each slide. I came across an intriguing technique on css-tricks.com and a very straightforward working example, but I have not been successful in replicating it. Be ...

css

Is there a method to uncover the code that controls the display of a <div> element?

As a fresh face at the company, I've been given the responsibility of developing a chart that is similar to one already present on their website. While I have the knowledge and skills to create it, I am struggling to locate the specific code where the ...

htmltypescript

Issues with website display on LAMP server host causing viewing problems

As someone who is new to LAMP and web design in general, I appreciate your understanding as I navigate through any mistakes I may encounter. I have successfully set up a LAMP server on my Linux (Ubuntu) virtual machine and installed Wordpress. Everything ...

htmllinuxwordpresslocalhostvirtualbox

What is the best way to center a Checkbox in HTML5 and CSS?

I've been struggling to center my Checkbox with label on my current website project. Despite searching online for solutions, I'm still unable to find the right method! If you're curious, you can check out the source code of my webpage at ( ...

csshtmlweb-applicationsweb

HTML: Image not updating despite meta tag refresh

I am using the following HTML5 code to display an HTML page with an image (1.JPG). The setup is working correctly, but I am encountering an issue. The image at the specified path is supposed to be randomly replaced with a newer image within a certain tim ...

html

Are you interested in designing a bootstrap album for your homepage?

I'm currently working on designing an album-style layout similar to the examples provided below: if you look at the recent works section where you have an image on one side and text on the other, occupying the entire width of the page: or the example ...

htmlcssbootstrap-4

Attempting to align the text on a single line

Hey there, I have a quick question about my website. I followed some advice and everything is working great, but now I have an issue with a space between the tables. I wanted to attach a file, but it seems I don't have enough reputation yet. If you ...

html

Overlay jQuery Accordion

I am currently working on an accordion to display old blog posts. However, when using a tab, the section below either moves or jumps around. I want the tab to lay over the rows below it without affecting their position. I have tried various solutions in ...

javascriptjqueryhtmlcss

What is the method for creating a beveled text effect using CSS?

Is there a CSS-only method to achieve a beveled text effect? https://i.sstatic.net/s4Wlw.png Just to clarify, I'm seeking a way to make text appear thick with a beveled style rather than using something like text-shadow which simply extends the font ...

css

Exploring the hover effect in CSS pseudo classes

I currently have a sub menu that consists of 4 headers. The code snippet provided below is used to style the first element in each column of the submenu. My next task is to create a hover effect for these elements, where the background color changes to gr ...

htmlcssclassselector

How to center align SVG with text in a unique way

Having trouble vertical aligning my inline SVG within a label. Any suggestions? This is how I've attempted it: <label for="menu-check-box">More<svg class="more-icon"><use xlink:href="#more-chevron"></use></svg></labe ...

htmlcsssvg

Exploring through a dynamically generated table containing JSON data

I have successfully implemented a dynamic HTML table that is populated with JSON data based on the value of a variable when the "go" button is clicked. The initial population and search functionality work flawlessly. However, I encountered an issue when ch ...

javascriptjqueryhtmljson

Download File Submission Button

Searching for a submit button code that will save the data and initiate a file download with a single click. Can someone assist me with this request? ...

phphtmlcss

Deactivating The Canvas Element

I am currently working on a project that involves using Three.js alongside a menu placed above the canvas element, which is essentially a regular div. However, I have encountered an issue where the canvas element still registers input when interacting with ...

jqueryhtmlcsscanvasthree.js

The hamburger menu unexpectedly appears outside the visible screen area and then reappears at random intervals

My website has a hamburger menu for mobile devices, but there's a problem. When the page loads on a small screen, the hamburger menu is off to the right, causing side scrolling issues and white space. I thought it might be a CSS problem, but after exp ...

javascripthtmlcss