SVG design attributes

I'm attempting to add separate SVG code inline at the bottom, but I'm not sure how to do this as it's different from the usual HTML layout properties.

I've placed each SVG inside a common div like this:

    .svg-container {
     width: 60px;
     display: inline-block;
    }
   <div class="svg-container">
    <svg viewBox="0 0 128 128">
    <path fill="#E44D26" d="M27.854 116.354l-8.043-90.211h88.378l-8.051 
    90.197-36.192 10.033z"></path><path fill="#F16529" d="M64 
    118.704l29.244-8.108 6.881-77.076h-36.125z"></path><path fill="#EBEBEB" 
    d="M64 66.978h-14.641l-1.01-11.331h15.651v-11.064h-27.743l.264 2.969 
    2.72 30.489h24.759zM64 95.711l-.049.013-12.321-3.328-.788-8.823h-
    11.107l1.55 17.372 22.664 6.292.051-.015z"></path><path d="M28.034 
    1.627h5.622v5.556h5.144v-5.556h5.623v16.822h-5.623v-5.633h-
    5.143v5.633h-
    5.623v-16.822zM51.816 7.206h-4.95v-5.579h15.525v5.579h-4.952v11.243h-
    5.623v-11.243zM64.855 1.627h5.862l3.607 5.911 3.603-
    5.911h5.865v16.822h-
    5.601v-8.338l-3.867 5.981h-.098l-3.87-5.981v8.338h-5.502v-
    16.822zM86.591 
    1.627h5.624v11.262h7.907v5.561h-13.531v-16.823z"></path><path 
    fill="#fff" d="M63.962 66.978v11.063h13.624l-1.284 14.349-12.34 
    3.331v11.51l22.682-6.286.166-1.87 2.6-29.127.27-2.97h-2.982zM63.962 
    44.583v11.064h26.725l.221-2.487.505-5.608.265-2.969z"></path>
    </svg>
    </div>
    <div class="svg-container">
    <svg viewBox="0 0 128 128">
    <path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"></path>
    <path fill="#323330" d="M116.347 96.736c-.917-5.711-4.641-10.508-
    15.672-
    14.981-3.832-1.761-8.104-3.022-9.377-5.926-.452-1.69-.512-2.642-.226-
    3.665.821-3.32 4.784-4.355 7.925-3.403 2.023.678 3.938 2.237 5.093 
    4.724 
    5.402-3.498 5.391-3.475 9.163-5.879-1.381-2.141-2.118-3.129-3.022-
    4.045-
    3.249-3.629-7.676-5.498-14.756-5.355l-3.688.477c-3.534.893-6.902 2.748-
    8.877 5.235-5.926 6.724-4.236 18.492 2.975 23.335 7.104 5.332 17.54 
    6.545 18.873 11.531 1.297 6.104-4.486 8.08-10.234 7.378-4.236-.881-
    6.592-3.034-9.139-6.949-4.688 2.713-4.688 2.713-9.508 5.485 1.143 2.499 
    2.344 3.63 4.26 5.795 9.068 9.198 31.76 8.746 35.83-5.176.165-.478 
    1.261-3.666.38-8.581zm-46.885-37.793h-11.709l-.048 30.272c0 6.438.333 
    12.34-.714 14.149-1.713 3.558-6.152 3.117-8.175 2.427-2.059-1.012-
    3.106-
    2.451-4.319-4.485-.333-.584-.583-1.036-.667-1.071l-9.52 5.83c1.583 
    3.249 
    3.915 6.069 6.902 7.901 4.462 2.678 10.459 3.499 16.731 2.059 4.082-
    1.189 7.604-3.652 9.448-7.401 2.666-4.915 2.094-10.864 2.07-17.444.06-
    10.735.001-21.468.001-32.237z"></path>
    </svg>
    </div>

If I change the coordinates in the viewbox attribute to match 

viewBox = <min-x> <min-y> <width> <height>
, for example, 
<svg viewBox="0 -250 128 128">
, the position remains unchanged.

Any insights from someone experienced with SVG would be highly appreciated!

htmlcsssvg

Answer №1

  1. It appears that you attempted to remove the text "HTML" above the HTML5 logo in the SVG file and accidentally deleted part of the path. I have taken the original HTML5 logo SVG file and applied the necessary CSS markup.
  2. The position of the "JS" logo was not centered within the viewport. To adjust the location of the JS characters to the center of the viewport, the following attributes were added:

width="100" height="100" viewBox="12 25 128 128"

The initial two attributes of the viewBox move the JS characters left by 12px and up by 25px respectively.

If I understood your question correctly, the revised code should resemble this:

.svg-container {
position:absolute;
top:2%;
left:1%;
width: 120px;
display: inline-block;
}
.svg-container2 {
position:absolute;
top:16%;
left:20%;
width: 60px;
display: inline-block;

}
.wrap {
width:1000px;
height:120px;
position:relative;
padding:0.5em;
}
<div class="wrap">
<div class="svg-container">
<svg  viewBox="0 0 512 512">
<title>HTML5 Logo</title>
<polygon fill="#E44D26" points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"/>
<polygon fill="#F16529" points="256,480.523 376.03,447.246 404.27,130.894 256,130.894"/>
... (remaining SVG paths)
</svg>
</div>
<div class="svg-container2">
<svg width="100" height="100" viewBox="12 25 128 128" style="border:1px solid black">
<rect x="12" y="25" width="128" height="128" fill="#F0DB4F" />
... (additional SVG paths for JS logo)
</svg>
</div>
</div>

Answer №2

It seems like there are a couple of inquiries to address here. Let me attempt to provide solutions to both: my interpretation is that you want to achieve the following:

  1. Create two inline columns, each containing an SVG that adjusts its width based on the column's size when resized.
  2. Adjust the positioning of the paths within the SVGs' view box.

Regarding the first point, you can set 

viewBox = "0 0 widthOfSVG heightOfSVG"
in order to accomplish this. Then, utilize CSS to align the columns next to each other. However, it's important to note that this may not function properly in certain versions of Internet Explorer – in such cases, a common workaround involves utilizing JavaScript to resize your SVGs by attaching a function to the window resize event.

As for the second issue, regrettably, it appears that the paths must be recalculated or rewritten to the appropriate positions within the SVG. While this task could potentially be achieved with JavaScript, it may become quite intricate fairly quickly.

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

Is there a way to retrieve the disabled drop-down field value after submitting the form?

I'm struggling with a dropdown field that becomes disabled once an item is selected. After submitting the form, the dropdown field loses its value and I'm left with an empty field. Any suggestions on how to keep a value in the dropdown after subm ...

javascriptcssjquery

Vue's watch feature will not execute if the watched property remains unchanged during a page reload

<template> <!-- The navbar has a property for gender, the color of the navbar will change depending on the gender --> <!-- pass the props gender through a form submission and event --> <div class="nav-main" :class="{f ...

javascripthtmlvue.jsvuejs3

Making the child element expand to the full width of its parent while maintaining an overflow-x:auto property

Is there a way to stretch a child div without specifying fixed widths? Even when trying to wrap items and child in one wrapper div, the child div always takes up 100% width. Not full horizontal width. Thank you. .parent { background: skyblue; widt ...

css

Split the output into two separate columns in a cshtml file using a foreach

Is there a way to modify my current code so that the output is displayed in two columns instead of one? Would using flex grid be the best approach, or is there another method I should consider? <div class="col-12 box-container"> <div class=" ...

c#htmlcss.net

In the HTML code, the select option will show the value with an empty colored div and then

Is it possible to create an HTML select option that displays a value along with an empty color div? Can this be achieved using HTML, JavaScript, or jQuery? I have attached a png file for reference, and I want the output to look similar. <select> ...

javascriptjqueryhtml

Using Node.js to manipulate an existing Div element on an HTML page

As I was browsing for a solution to my node.js issue, I stumbled upon a question that has already been answered here: Node.js send HTML as response to client However, the answer did not quite solve my problem. My scenario involves having a form on the se ...

javascripthtmlnode.js

What is the best way to specify the dimensions of an image with CSS or Bootstrap?

I am facing some challenges while building my website. The ideal look of the page is represented by home_page_ideal. The issue arises with the small boxed image on the top left corner. Once I scroll to the top, the page displays as home_page_issue. The CSS ...

htmlcsstwitter-bootstrap

Can CSS be used to horizontally align individual characters by adjusting letter-spacing?

When I apply the CSS rule letter-spacing: 16px;, I observe that the characters are aligned to the left within their designated space, causing the cursor to jump towards the right as if an additional space was added after each character. I am wondering if ...

css

Using PHP to include a class in an input element

Recently, I've been working on a form that involves PHP form validation. In my CSS file, there's a class designated for invalid inputs that I'm trying to add to each one. To see an example, feel free to check out the JSFiddle here. The ".inv ...

phphtmlcssformsvalidation

Creating a responsive design with HTML and CSS that expands an image to hold additional text

I have a blue bubble image that I want to overlay text on. The amount of text will vary, so I need the image to expand vertically to accommodate more text. I'm hoping for some guidance on how to make the image adjust its size based on the amount of ...

htmlcssimage

creating input type within an ng-repeat loop

I am currently working on a project where I have a series of input fields within different options. These input fields are being added dynamically to my page using ng-repeat. <input type="text"> Each option object contains the type of input field, ...

htmlangularjs

JavaScript event array

I have a JavaScript array that looks like this: var fruits=['apple','orange','peach','strawberry','mango'] I would like to add an event to these elements that will retrieve varieties from my database. Fo ...

phpjavascripthtml

HTML/PHP/JS - Submit Form and Upload File Simultaneously

I need to create a form with a Photo Upload Input that allows users to upload pictures before submitting the form for faster processing. The form should also support uploading multiple files, display a progress bar, and provide a preview of the uploaded im ...

phpjavascripthtmlfileupload

vue.js experiences a delay in firing the mouseleave event

My sidebar is a simple design in HTML with a script that causes it to open and close when the mouse enters and leaves. I utilized Vue.js for the entire sidebar, everything is functioning well except for one issue - when the mouse hovers over an item in the ...

javascriptcssvue.js

Troubles with CSS Child Hover, Rotation, and Clipping in Pie Chart styling

The issue I am facing is with a 3-section pie chart where all sections look virtually identical. However, the :hover effect does not trigger on the first section, but it works on the other two. Each element has an equal number of overlapping parent divs, ...

htmlcsshoverclip

What is the best way to display a Bootstrap v4 modal box within a container div?

Exploring the capabilities of Bootstrap v4.0.0-alpha has been an exciting experience, but I have a specific requirement in mind: I want to place a modal box inside a container div instead of it covering the entire screen. https://i.sstatic.net/xyZ8X.jpg I ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Instructions on adding a class to every input element within a form using CakePHP

Is there a way to utilize the inputDefaults property in order to apply a consistent class across all input elements within my form? Additionally, could you provide a concise explanation of what exactly the inputDefaults entails? ...

phphtmlcsscakephp

What is the best way to dynamically shift the position of an image on a page while keeping it in place in real-time?

A group of friends and I are currently collaborating on an experimental project for a presentation. Our goal is to have multiple elements (such as images, text, gifs) displayed on a page that can be dragged around in real-time using a draggable script whi ...

javascripthtmlcssdraggable

What is the process for adding elements to an object in Angular JS?

My goal is to send data to an ng-object after filling out and submitting an HTML form with user-defined values. However, after pressing submit, the values are being duplicated. I have attempted to clear the data by using $scope.user > $scope.user=&apos ...

javascripthtmlangularjs

The function I created is having trouble connecting to the controller.js file

My JavaScript controller file function ServicesCtrl($scope) { console.log("Greetings from ServicesCtrl"); $scope.message = "Hello!"; } The main HTML file <html> <head> <title>The Complete Web Development Stack</ti ...

htmlangularjsangularjs-controller