What is the best way to align a scalable SVG image in the center?

My goal is to horizontally align this SVG within its container, which could be any div, body, or other element.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1250 190" preserveAspectRatio="xMidYMid slice" class="svg-content">
            <g fill="none" fill-rule="evenodd" transform="">
                <ellipse cx="442.5" cy="5.5" fill="#172A3A" rx="5.5" ry="5.5"></ellipse>
                <path stroke="#172A3A" d="M806.88 69.082v-4.68c0-12.692-10.29-22.98-22.982-22.98h-316.59c-9.558 0-18.64.828-24.868-6.422-6.228 7.25-15.31 6.42-24.87 6.42H100.983C88.29 41.42 78 51.71 78 64.403v4.68M442.5 11v55.5"></path>
                <ellipse cx="78.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse>
                <ellipse cx="443.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse>
                <ellipse cx="78.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse>
                <ellipse cx="443.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse>
                <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2">
                    <tspan x="69.177" y="117">72</tspan>
                </text>
                <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2">
                    <tspan x="27.471" y="183">Investments</tspan>
                </text>
                <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2">
                    <tspan x="433.39" y="117">30</tspan>
                </text>
                <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold" letter-spacing="2">
                    <tspan x="350.356" y="183">Succesful Trade Sales</tspan>
                </text>
                <ellipse cx="807.001" cy="113.501" fill="#743B41" rx="47.001" ry="47.501"></ellipse>
                <ellipse cx="807.154" cy="113.54" fill="#172A3A" rx="36.154" ry="36.54"></ellipse>
                <text fill="#FFF" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold">
                    <tspan x="800.749" y="117">13</tspan>
                </text>
                <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="11" font-style="expanded" font-weight="bold">
                    <tspan x="793.588" y="182.003">IPOs</tspan>
                </text>
            </g>
        </svg>

htmlcsssvg

Answer №1

Question about centering an SVG can be found here.

To center an SVG, you can set it to display: block and then apply margin: auto.

Answer №2

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 732 210" preserveAspectRatio="xMidYMid meet" class="svg-container">
        <g fill="none" fill-rule="evenodd" transform="">
            <ellipse cx="350.5" cy="10" fill="#264726" rx="6" ry="6"></ellipse>
            <path stroke="#264726" d="M689.98 85.082v-4.78c0-13.692-11.29-23.98-24.982-23.98h-288.59c-9.558 0-19.64.728-25.868-6.522-6.228 7.32-15.31 7.42-24.87 7.52H70.983C58.29 40.42 48 55.71 48 68.403v4.68M350 14v63.75"></path>
            <ellipse cx="88.001" cy="123.501" fill="#543E41" rx="43.001" ry="47.501"></ellipse>
            <ellipse cx="356.301" cy="125.101" fill="#543E41" rx="49.001" ry="53.601"></ellipse>
            <ellipse cx="99.134" cy="119.54" fill="#264726" rx="34.154" ry="36.54"></ellipse>
            <ellipse cx="367.253" cy="118.74" fill="#264726" rx="39.754" ry="33.58"></ellipse>
            <text fill="#EEE" font-family="Novecentowide-Medium, Novecento wide" font-size="12" font-style="expanded" font-weight="bold" letter-spacing="2">
                <tspan x="69.577" y="127.56">67</tspan>
            </text>
            <text fill="#FFF" opacity=".928" font-family="Novecentowide-Bold, Novecento wide" font-size="13" font-style="oblique" font-weight="bold" letter-spacing="2">
                <tspan x="27.471" y="203">Investments</tspan>
            </text>
            <text fill="#FFF" font-family="Novecentowide-Regular, Novecento wide" font-size="11" font-style="italic" font-weight="bold" letter-spacing="1.5">
                <tspan x="433.39" y="120">27</tspan>
            </text>
            <text fill="#FFF" opacity=".918" font-family="Novecentowide-Bold, Novecento wide" font-size="13" font-style="expanded" font-weight="bold" letter-spacing="2">
                <tspan x="330.656" y="203">Successful Business Models</tspan>
            </text>
            <ellipse cx="700.501" cy="113.801" fill="#543E41" rx="57.041" ry="45.901"></ellipse>
            <ellipse cx="631.254" cy="126.238" fill="#264726" rx="37.554" ry="35.774"></ellipse>
            <text fill="#EEE" font-family="Novecentowide-Light, Novecento wide" font-size="12" font-style="normal" font-weight="bold">
                <tspan x="667.739" y="117">18</tspan>
            </text>
            <text fill="#FFF" opacity=".928" font-family="Novecentowide-Bold, Novecento wide" font-size="13" font-style="expanded" font-weight="bold">
                <tspan x="750.788" y="193.003">IPO Data Analysis</tspan>
            </text>
        </g>
    </svg>


    <style>
     svg {
     display: block;
     margin: 0 auto;
     max-width: 1420px;
     }
    </style>

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

Styling <CardHeader> component with React and Material UI CSS

Incorporating React and Material UI, my goal is to arrange 3 divs within a <Card> <CardHeader/>, positioning them with left, center, and right alignment as illustrated below. The modification required is minor - I simply need to eliminate the ...

cssreactjsmaterial-ui

Explore the Codrops website with the help of our convenient tour feature and

CoDrops offers a website tour feature created with jQuery, which can be found at this link: http://tympanus.net/Development/WebsiteTour/ However, there is an issue when you click on "Start the tour". It will initially show a Next button, which then change ...

jquerycssgallery

Animate the transition of the previous element moving downward while simultaneously introducing a new element at the top

I currently have a hidden element called "new element" that is controlled by v-if. My goal is to create a button labeled "display" that, upon clicking, will reveal the new element on top after sliding down an old element. How can I achieve this using CSS ...

javascriptcssvue.js

Align two lines of text in the center of a table

I need assistance with creating a table in HTML for an email. I would like to display a two-lined text, where the top line is formatted in bold. <table style="width:100%"><tr > <td style="background-color:#000000;color:#fff;font-fam ...

htmlemailhtml-tablehtml-email

The issue of incomplete post content display on WordPress pages persists despite making modifications to the style.css file

click here for image descriptionI attempted to make some adjustments in the style.css file but encountered a problem. Now, all the posts on the site are displaying "[...]" after a brief and unformatted snippet of content. Any assistance would be greatly ...

phpcsswordpress

Applying CSS to an iframe using JavaScript: A Step-by-Step

I have an Iframe editor and I am trying to change some CSS inside the editor. However, when I attempt to apply the CSS, it does not affect the styles within the Iframe. <div id="editor" style="flex: 1 1 0%;"> <iframe src="https://editor.unlay ...

javascripthtmlcssreactjsdom

Troubleshooting: PHP Integration Issue with HTML Document

I have a simple HTML file displaying text and including a PHP file with basic echos: The HTML code is in 'home.html' file: <html> <body> <h1>Welcome to my home page!</h1> <p>Some text.</p> <p>Some more ...

phphtmlcssxampp

Angular Markdown Styling: A Guide

Currently, I am using Angular and Scully. I would like to add style to the image in a markdown file within Angular, but I am unsure of how to accomplish this task. The image is currently displaying too large. Can anyone provide me with useful advice on how ...

cssangularsassmarkdownscullyio

What is the most effective method for incorporating parameterized aesthetics using CSS in a JSP program?

I am currently working on a JSP web application without the support of any framework, unfortunately. This application is intended to serve multiple customers, each with their unique set of colors and company logos. The overall layout of the CSS will remai ...

htmlcssjsptomcatservlets

Avoid navigating through hidden tab indexes

Below is the HTML code that I am working with: <span tabindex="19"> </span> <span tabindex="20"> </span> <span tabindex="21"> </span> <span id="hidden" tabindex="22"> </span> <span tabindex="23"&g ...

javascriptjqueryhtml

Using JavaScript to interact with text elements in external SVG documents

When it comes to creating an SVG within HTML and assigning specific IDs to text elements for easy access, everything works smoothly. For example, I can easily retrieve the ID using: let callQSO = document.getElementById("QSOcall").value; and th ...

javascripthtmlsvggetreact-native-svg

Limits of the window in a d3 network diagram

I'm currently working with a network diagram that consists of circle elements and lines connecting them. However, I've run into an issue where sometimes there are so many circles that they extend beyond the edge of my screen (see image attached). ...

javascriptjquerycssd3.jsdiagram

Is there a way to ensure uniform display of HTML form error messages across various browsers?

Recently, I completed a login form that consists of username and password fields. For the username, I used a text field with the type email, while for the password, I utilized a text field with the type password which requires validation through a regex pa ...

javascripthtmlangularjsvalidationconstraint-validation-api

The issue I'm facing involves Materialize CSS interfering with the rendering of input fields from PrimeNG. Does anyone have a solution to resolve

The code I am working with is as follows: <div class="container" style="width:100%;"> <div class="ui-widget-header" style="padding:4px 10px;border-bottom: 0 none"> <i class="fa fa-search" style="margin:4px 4px 0 0"></i> < ...

cssmaterializeprimengprimeng-datatable

Issues with styling SVG when using the `<use>` element

I am currently faced with a challenge involving CSS, where I need to modify the size and color of an SVG element that is being displayed using <use>. The specific SVG in question is as follows: <svg xmlns="http://www.w3.org/2000/svg" width="24" h ...

csssvg

Troubleshooting layout problems caused by positioning items at window height with CSS and jQuery

At this moment, my approach involves utilizing jQuery to position specific elements in relation to the window's size. While this method is effective when the window is at its full size, it encounters issues when dealing with a debugger that's ope ...

javascriptjqueryhtmlcss

Having trouble placing the flash element above the HTML?

Despite my efforts to use SWFObject to embed a swf file on my webpage, it seems that the flash movie is covering some of the HTML components. Strangely enough, the HTML elements are bleeding through and appearing on top of the flash content. I've tri ...

htmlcssflashz-indexwmode

How can you incorporate AJAX to add a paragraph element to your HTML document?

I have encountered an issue with two files in my project. The first file is an HTML document, while the second file is a PHP file called ajax_access_database.php. Originally, I intended for the PHP file to access a database, but complications arose, leadin ...

javascriptphphtmlajax

Cannot find property in type, and the parameter is implicitly of an unspecified type

I've been encountering this issue where I keep getting an error message. I attempted to resolve it by setting "noImplicitAny": false in tsconfig.json, but unfortunately that did not work. As for the 'Property does not exist on type' error, I ...

javascripthtmlangulartypescriptfirebase

Mysterious Chrome glitch causes SVG element to shift down by 2 pixels

I am currently facing an issue with creating image links from an SVG spritesheet that is causing cross-browser problems between Chrome, Safari, and Firefox. Here are some of the anchor tags I am using: <a href="#" id="twitter-logo" class="socialIcon"&g ...

cssgoogle-chromesvgsafaribackground-position