The SVG path is not aligned properly with the container's viewbox dimensions

Recently, I came across an icon provided by a plugin I am using called calendar. However, I wanted to enhance my icons set with a new addition - the twitter icon.

svg {
    display: inline-block;
    height: 16px;
    width: 16px;
    margin: 2px 0;
    fill: #111;
    text-decoration: none;
    pointer-events: none;
    line-height: 1;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" unselectable="on"><path d="M8.1 7v1h2.7v1H8.094v3H11.7v-1H9v-1h2.7V7zM4.5 7v1h.8v3h-.8v1h2.7v-1h-.9V7zM.9 1v14h14.4V1h-1.8v2h-2.7V1H5.4v2H2.7V1zm.9 4h12.6v9H1.8z"></path></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" unselectable="on"><path class="letterB" d="M16.16 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg>

Although both icons are in SVG format, the first one, calendar, is optimized for viewbox 16 16. On the other hand, the Twitter icon's SVG path was copied from a website and does not align properly within the container as shown in the example...

Is there a way to address this issue? I attempted to assign a class to the twitter path but encountered difficulties.

htmlcsssvg

Answer №1

Transformed your Twitter icon to fix a scale to viewBox issue.

svg {
    display: inline-block;
    height: 16px;
    width: 16px;
    margin: 2px 0;
    fill: #111;
    text-decoration: none;
    pointer-events: none;
    line-height: 1;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" unselectable="on"><path d="M8.1 7v1h2.7v1H8.094v3H11.7v-1H9v-1h2.7V7zM4.5 7v1h.8v3h-.8v1h2.7v-1h-.9V7zM.9 1v14h14.4V1h-1.8v2h-2.7V1H5.4v2H2.7V1zm.9 4h12.6v9H1.8z"></path></svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" unselectable="on">
<path d="M16,3.8c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1c-2.1,0-3.7,2-3.2,4 C5.2,6.1,2.7,4.8,1.1,2.8c-0.9,1.5-0.4,3.4,1,4.4c-0.5,0-1-0.2-1.5-0.4c0,1.5,1.1,2.9,2.6,3.3c-0.5,0.1-1,0.2-1.5,0.1 c0.4,1.3,1.6,2.3,3.1,2.3C3.5,13.5,1.7,14,0,13.8c1.5,0.9,3.2,1.5,5,1.5c6.1,0,9.5-5.1,9.3-9.8C15,5,15.6,4.4,16,3.8z"/>
</svg>

UPDATED

Shoutout to Danny '365CSI' Engelman

You can edit individual paths at: aydos.com/svgedit

Update: A better editor can be found at:

Answer №2

Instead of going through the trouble of modifying paths, you have the option to apply a transform directly on the path itself.

<path transform='scale(.5) translate(8 8)' ..../>

Another approach is to group all SVG elements together and apply a single transform to the entire group:

<g transform='scale(.5) translate(8 8)'>

.. include all paths, rects, or other shapes here

</g>

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

Exporting headers of an HTML table using Jquery to Excel is not functioning properly

I need assistance with exporting an HTML Table that is dynamically generated based on the data. The table layout is defined before the data is populated, and once the data is queried, rows are added to the table dynamically. <table id="findCntrctTable" ...

jqueryhtmlexcel

Is there a way to consistently monitor the visible image's height?

I am facing an issue with a slider of images where I need the height of the slider to always match the height of the currently visible image within the slider. I have tried implementing code that automatically detects the height of the image within the sl ...

jqueryhtmlslider

"Enhance Your Website with Various Hover Effects Using CSS across Multiple Elements

Has anyone experienced trouble with making the hover effect work in my onHover class and applying a display effect to span.box? Any ideas on how to fix this? .onHover { display: block; width: 200px; height: 20px; background: green; } .onHover:ho ...

htmlcsshover

Preserve HTML client control values during page reloads

Is there a more efficient way to retain client-side HTML controls on postback? I've attempted using enableviewstate="true", but it didn't work. My current workaround involves creating a server-side function that resets all posted values using Cli ...

c#asp.nethtmlpostbackviewstate

Having trouble with integrating user input from HTML into a JavaScript file to execute a GET request

I am currently working on a project to create a website that integrates the google books API for users to search for books. To start, I have set up a server using express in index.js at the root of the project directory, and all my static files are stored ...

javascripthtmlexpress

Moving the element from the right side

Is there a way to change the direction of this element's transition from left to right, so that it transitions from right to left smoothly without any gaps between the element and the edge of the page? @keyframes slideInFromRight { 0% { trans ...

css

Stuck autoplay feature when clicking

There is an issue with the play function in the built-in browser audio player. Initially, it starts automatically with the following code... function play(){ var audio = document.getElementById("myaudio"); audio.play(); } However, when modifying the code ...

javascripthtmlaudioonclick

What is the best way to showcase an image using Vue data that is in string format and originates from the backend?

Within my project, the profile image paths of users are stored in the database as a varchar, which is then converted into a string in the backend. This string is then utilized and sent to the frontend using JSON. I am currently facing a challenge in utiliz ...

htmlvue.jsfrontend

What is the process of implementing a tree view hierarchy in PHP using CodeIgniter?

I have an array structured like this: Array ( [0] => Array ( [id] => 1 [child_name] => "Emma" [parent_name] => "Mr Brown" ) [1] => Array ( [id] => 2 ...

phphtmlarrayscodeigniter

The alignment of the JQuery Mobile tabs is off

As I work on developing a Cordova app, I've noticed that the tabs on my Android phone display in an unusual way. Here's what they look like: The image above was created in JSFiddle using JQuery 2.1.0 and JQM 1.4.2 selected with the following co ...

javascriptjqueryhtmlcssjquery-mobile

What is causing my circles to not align properly in the center?

My website features circles that display various percentages. Each circle contains text indicating the percentage amount, as well as a short description underneath. While I have successfully centered all the text elements, I am facing difficulty centering ...

htmlcsstwitter-bootstrapresponsive-design

Adjust the appearance of a div according to the input value

When a user inputs the correct value (a number) into an input of type "number," I want a button to appear. I attempted var check=document.getElementById("buttonID").value == "1" followed by an if statement, but it seems I made a mistake somewhere. Here&ap ...

javascripthtmlcssbuttoninput

Refine the pandas Dataframe with a filter on a JavaScript-enabled website

I recently inherited a large software project using Python/Flask on the backend and HTML/Javascript on the frontend. I'm now looking to add some interactivity to one of the websites. I have successfully passed a dataframe to the webpage and can displa ...

javascriptpythonhtmlpandasflask

Tips for populating an HTML input with the value of a link element using JQuery

I have a form input that I want to populate with autocomplete suggestions from my database using Ajax. To style the list, I am using bootstrap 4, and I have opted to use the <a></a> tag instead of the <li></li> tag. This is because ...

javascriptjqueryhtml

Unable to retrieve HTML element using Python's Selenium

Whenever I try to access a specific website using Selenium, a pesky pop-up appears and I can't seem to locate the close button to dismiss it. from selenium import webdriver from time import sleep from selenium.webdriver.common.keys import Keys import ...

pythonhtmlselenium-webdriverwebelement

Increasing the nth-child Selector in Jquery

Referring to this I am looking to cycle through the nth-child selector, which involves: var i = 1; var tmp = $(this).find('td:nth-child(i+1)'); // I wonder how this can be achieved i++; I have rows with dynamically generated columns i ...

javascriptjqueryhtmlcss

Utilize a single JavaScript script to handle numerous HTML forms within the same webpage

I am currently facing an issue with a page that contains multiple forms needing the same JavaScript code. This specific code is designed to add more input fields to the form, which it does successfully. However, the problem lies in the fact that it adds in ...

javascriptjqueryhtmlformsreusability

The use of .hidden in Tailwind-CSS does not result in the application of flex or block styles to the element

My intention is to hide the div on small screens and display it on larger screens starting from md: However, it seems like the .hidden class has a higher priority or may be interfering with some of my dependencies. <div className="hidden md:flex&qu ...

cssreactjsnpmtailwind-csspostcss

Trouble with image rotation in jQuery/JavaScript slideshow

For more information, you can visit and click on the Canucks icon, which is located as the third icon below "information architecture and usability." I am attempting to set up a jQuery slideshow by utilizing a template I found online. However, I am encou ...

javascriptjqueryhtml

What is the best way to display the current page within a frame in HTML?

Having some trouble creating a frame on my web page. Utilizing the <IFRAME> tag to create it. My file is named Testing.html. Here's an example: <IFRAME src="Sample.html" style="width:800px; height: 250px; float:right; border:none"></I ...

phphtmliframe