Ways to adjust the positioning of an SVG graphic using CSS

I have a full-width and full height SVG graphic, but I want to only show the center of it when in portrait orientation and crop the left and right sides. I need to achieve this using CSS.

<style type="text/css">
    .svg-container {
        width: 100%;
        /*height: 100vh;*/
    }

    .svg-container svg {

    }
</style>

<div class="svg-container">
    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 800 450.1" enable-background="new 0 0 800 450.1" xml:space="preserve">
    <g id="XMLID_117_">
        <polyline id="XMLID_17_" fill="#FFFF00" points="800,449.7 0.4,449.7 0.4,0 800,0     "/>
        
            <line id="XMLID_1009_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="270.1" y1="385.2" x2="800" y2="385.2"/>
        <g id="XMLID_1004_">
            
                <line id="XMLID_1006_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="672.1" y1="272.3" x2="672.1" y2="449.7"/>
            
                <line id="XMLID_1005_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="471.1" y1="272.3" x2="471.1" y2="449.7"/>
        </g>
        
            <line id="XMLID_1026_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="0.4" y1="64.4" x2="530.3" y2="64.4"/>
        
            <line id="XMLID_1024_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="329.3" y1="0" x2="329.3" y2="177.3"/>
        
            <line id="XMLID_1023_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="128.4" y1="0" x2="128.4" y2="177.3"/>
        
            <path id="XMLID_4_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M799,272H325c-30.7,0-56,24.9-56,55.6V450"/>
        
            <path id="XMLID_3_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M0,178h475.5c30.7,0,55.5-25.4,55.5-56.1V0"/>
    </g>
    </svg>
</div>

cssimagesvgcrop

Answer №1

To use an SVG code as a background image, it's recommended to save the code as a separate SVG file, such as yellow.svg. Then, incorporate it as the background of the svg-container element. Here's a code snippet to guide you:

body {
    margin: 0;
    padding: 0;
    text-align:center;
}

 @media screen and (orientation: landscape) {
     .svg-container {
        position:absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background:url(yellow.svg) center center no-repeat;
        background-size: cover;       
    }
}
@media screen and (orientation: portrait) {
    .svg-container {
        height: 200px;
        width: 80%;
        background:url(yellow.svg) center center no-repeat;
        margin: 0 auto;      
    }
}
<div class="svg-container"></div>

Answer №2

If you're looking for a quick fix, just insert this snippet into your SVG:

preserveAspectRatio="xMidYMid slice"

Next, ensure that your website's body, <div>, and <svg> elements occupy the full height of the page.

body {
  height: 100vh;
}

.svg-container,
.svg-container svg {
  width: 100%;
  height: 100vh;
}
<div class="svg-container">
    <svg viewBox="0 0 800 450" preserveAspectRatio="xMidYMid slice">
      <g id="XMLID_117_">
        <polyline id="XMLID_17_" fill="#FFFF00" points="800,449.7 0.4,449.7 0.4,0 800,0"/>
       
        <line id="XMLID_1009_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="270.1" y1="385.2" x2="800" y2="385.2"/>
        <g id="XMLID_1004_">
            
          <line id="XMLID_1006_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="672.1" y1="272.3" x2="672.1" y2="449.7"/>
            
          <line id="XMLID_1005_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="471.1" y1="272.3" x2="471.1" y2="449.7"/>
        </g>
        
        <line id="XMLID_1026_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="0.4" y1="64.4" x2="530.3" y2="64.4"/>
        
        <line id="XMLID_1024_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="329.3" y1="0" x2="329.3" y2="177.3"/>
        
        <line id="XMLID_1023_" fill="none" stroke="#000000" stroke-width="2.2761" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="128.4" y1="0" x2="128.4" y2="177.3"/>
        
        <path id="XMLID_4_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M799,272H325c-30.7,0-56,24.9-56,55.6V450"/>
        
        <path id="XMLID_3_" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
            M0,178h475.5c30.7,0,55.5-25.4,55.5-56.1V0"/>
      </g>
    </svg>
</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

Utilize a single CSS class or theme to style multiple boxes within a stack - Material-UI

I'm currently diving into the world of React js and MUI components. I'm in the process of creating a stack with multiple boxes, each with its unique style that's consistent across all boxes in the stack. Is there a simpler way to define one ...

cssreactjsmaterial-ui

Troubleshoot: Why is the Chrome Extension content script failing to prepend to the body

Currently, I am developing a content script for a Google Chrome browser extension that inserts a horizontal bar at the top of any webpage visited by the user. The issue arises when visiting google.com as Google's navigation bar covers my bar. Here is ...

jquerycssgoogle-chrome-extension

Animate images using mouse vertical movement

Creating websites is just a hobby for me, not something professional. Recently, I came across a beautifully designed website that had some unique features I hadn't seen before, like placing three images in one div (which I researched and learned how t ...

javascriptjqueryhtmlcss

Modifying the appearance of scoped child components in Vue: A step-by-step guide

I am currently using vant ui components in my Vue project, such as buttons. I would like to make some minor style adjustments, like changing the color and border, but I am unsure how to do it. Can anybody please assist me in solving this issue? Thank you i ...

cssvue.jscomponentsstylesvantui

Is it possible to use CSS border-radius without any vendor prefixes?

Are there alternative methods to create rounded borders without using the -moz prefix, since this only applies to Mozilla browsers? -moz-border-radius-topleft:3%; -moz-border-radius-topright:3%; -moz-border-radius-bottomright:3%; -moz-border-radius-bott ...

jquerymozillacss

Creating visually appealing Highcharts.js visualizations for both mobile and desktop devices

Has anyone had success implementing a responsive design with Highcharts to ensure charts look great on both mobile and desktop screens? By default, Highcharts do adjust when resizing the browser window, but sometimes the X-axis can become cluttered by tic ...

javascriptjquerysvghighchartsresponsive-design

Is it possible to trigger a mouseover event on a background div that is obscured by a foreground tooltip in jQuery?

I created a unique effect where a background div fades in when moused over, followed by the foreground div fading in. However, I encountered an issue where the tooltip ends up "flashing" as the foreground steals focus from the background. For reference, h ...

javascriptjqueryhtmlcss

What methods can I use to make sure the right side of my React form is properly aligned for a polished appearance?

Trying to create a React component with multiple input field tables, the challenge is aligning the right side of the table correctly. The issue lies in inconsistent alignment of content within the cells leading to disruption in overall layout. Experimente ...

javascripthtmlcssreactjstypescript

What are the best ways to engage with a div element using keyboard shortcuts?

Is it possible to enable keyboard shortcuts for interacting with div elements? I am working on a project tailored for seniors who may have difficulty using a mouse. Is there a way to utilize keyboard shortcuts to click on divs and access their contents? H ...

javascriptjqueryhtmlcss

Navigation website with a twist

My design features a main navigation that is rotated 90 degrees, while the sub-menu remains horizontally aligned. <div id="nav"> <ul> <li><a href="#">Woonaccessoires</a></li> ...

htmlcss

What is the best way to adjust the minimum width of the HTML5 progress element?

There is a similar question which addresses input elements having a minimum width determined by the size parameter. I am attempting to create a layout with an inline-flex element with a flex-direction: column property like this: .item { border: 1px s ...

htmlcssflexbox

Creating a CSS rollover effect for your logo on a WordPress website

Struggling to implement a CSS image rollover on a Wordpress header logo. The solution may be simple for you experts, but I can't find it anywhere on Stackoverflow. Could it have something to do with the position? Adding :relative or :absolute doesn&ap ...

csswordpresspositionrollover

Adjust the background color of children based on the parent's mouseover event

Seeking a solution to fill three bars with varying percentages: <div class="bars" style="width:0%; background-color: red;"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </ ...

javascriptcss

Tips for keeping the footer consistently at the bottom of the page without using a fixed position (to avoid overlapping with the main content)

I've been struggling to keep the footer at the bottom of my webpage. I came across a solution online suggesting to use fixed CSS positioning. However, when I applied this fix, the footer ended up overlapping with the actual content on the page. Is the ...

htmlcsstwitter-bootstrapbootstrap-4

The functionality of Angular material input fields is compromised when the css backface property is applied

I utilized this specific example to create a captivating 3D flip animation. <div class="scene scene--card"> <div class="card"> <div class="card__face card__face--front">front</div> <div class="card__face card__face--ba ...

cssangularangular-material

Rendering images in MPDF with a yellow hue

When rendering images on a PDF, I am experiencing an issue where the images are losing their original colors and showing up with yellow tones. I have tried setting $mdf->img_dpi to a high value, but this has not resolved the problem. It seems that this ...

phpimagepdfrenderingmpdf

IE9 is causing a bizarre problem where the entire page is suddenly jumping. It's

UPDATE: The client has requested testing to disable the click and drag feature in IE, so replicating the bug may be difficult at this time. I apologize if this hinders the community's ability to help fix the root issue. Here's the issue: It occu ...

javascriptjquerycssdebugginginternet-explorer-9

Can CSS `content` support the combination of different font styles?

I have set up a CSS element to insert some content. Here's the code: .foo:after { content: "Bold, italics"; } What I want is for the word "Bold" to appear in bold font-weight and the word "italics" to appear in an italic font-style. I know that ad ...

htmlcsscss-content

Transforming content dynamically

I am currently working on a single-page website that features a comprehensive product catalog. Here are the key elements I'm focusing on: A one-page website layout, complete with header, content, and footer (developed using HTML5/CSS3) Dynamic cont ...

jqueryajaxhtmlpluginscss

What is the proper way to convert the Vue3 ::v-deep SASS syntax to utilize :deep?

HTML: <template> <form class="bg-white"> <div class="source-field"> ... The original SASS code looks like this: .form::v-deep .source-field width: 129px display: inline-block margin: 0px 2px 5px 2px ...

cssvue.jssassvuejs3