Adjusting SVG Size for Mobile Devices

How do I make my SVG Logo responsive on mobile devices?

Check out my Fiddle and find the code below: 

body {
    background:black;
}

@media screen and (max-width: 500px) {
    svg {
        width:50%;
    }
}
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg version="1.1" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  <title>Logo</title>
  <desc>Created with Sketch.</desc>
  <defs></defs>
  <g id="Your-Score" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
    <g id="Desktop-Your-Score" sketch:type="MSLayerGroup" transform="translate(-23.000000, -24.000000)" font-weight="normal" font-family="Gill Sans" letter-spacing="1.16666663" font-size="28" sketch:alignment="middle" fill="#FFFFFF">
      <g id="Header" sketch:type="MSTextLayer">
        <g id="Primary-Nav-[home]-Copy">
          <g id="Logo" transform="translate(23.000000, 18.000000)">
            <text id="TOMORROW’S">
              <tspan x="0.0328778028" y="27">TOMORROW’S</tspan>
              <tspan x="36.2975262" y="58">SCORE</tspan>
            </text>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

htmlcsssvgresponsive-designresponsiveness

Answer №1

To successfully scale an SVG image using the img element, ensure that the width, height, and viewBox attributes are defined within it. Below is an example:

<svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="70px" height="70px" viewBox="0 0 70 70">
    <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
</svg>

By defining the width, height, and viewBox properties, you specify which part of the virtual canvas should be displayed by the browser. The viewBox indicates the coordinates of the upper left and lower right corners of the virtual canvas. Consequently, when the image is scaled larger than this specified size, the entire image will scale up rather than just adding white space around the SVG shapes.

To learn more about the viewBox property in relation to SVG, conduct further research.

It is recommended to always set the image width using CSS properties instead of relying on the width and height attributes of the img element. These attributes may not achieve the desired outcome as browsers interpret them differently from their corresponding CSS properties.

Answer №2

To include your SVG file in an <img> tag, you can follow this example:

<img src="my_svg_image.svg" alt="" />

You can then apply standard CSS to style the <img> tag and ensure it is responsive on mobile devices.

img {
   max-width: 100%;
}

Check out this helpful CODEPEN DEMO for more inspiration.

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

Image overlaying the full width of body content background

I am trying to find a solution to my problem, but so far no luck. The Body selector has a max-width of 85%, and there are other selectors like header which I want to have a background image that spans 100% of the width behind the body selector attribute. ...

cssbackground-image

Understanding the Contrast between Relative Paths and Absolute Paths in JavaScript

Seeking clarification on a key topic, Based on my understanding, two distinct paths exist: relative and absolute. Stricly relative: <img src="kitten.png"/> Fully absolute: <img src="http://www.foo.com/images/kitten.png"> What sets apart R ...

javascripthtmlcss

What is the reason the picture was not successfully duplicated into the directory?

I am currently utilizing Ajax and PHP in my project. I am trying to implement a functionality where I can upload an image without having to click the submit button. I found a solution mentioned in this answer: How to upload file using jquery ajax and php ...

phpjqueryhtmlajax

Is it possible to apply a delay function to JQuery's AjaxStart/Stop events?

As I was working on my single-page app, I thought about adding a spinner and gray background to provide feedback to users while processes are loading. I discovered JQuery's AjaxStart() and AjaxStop() functions, which allow me to display the spinner du ...

javascriptjqueryhtmlcssajax

How can I create curved text in Three.js?

I'm currently experimenting with Three.js in an attempt to create an object featuring curved text. Would using TextGeometry be the most appropriate approach for this task? var material = new THREE.MeshPhongMaterial({ color: 0xdddddd }); var ...

htmlthree.js

How to minimize the amount of typing needed when specifying grid positions in CSS Grid layout?

(I am currently in the process of upgrading the design of this data entry page from a basic CSS/HTML table layout to something more advanced, utilizing CSS Grid layout). Following common conventions, I have structured it into 12 columns. Each entry field ...

htmlcsslayoutcss-grid

Is there a way to create a dynamic CSS class without relying on the use of IDs?

Is there a way to create a dynamic CSS class without using an ID? $( "#mydiv" ).css( "width", $("#widthtextbox").val() ); $( "#mydiv" ).css( "height", $("#heighttextbox").val() ); I am looking to implement multiple CSS classes for this task. ...

javascriptjqueryhtmlcss

Utilizing PHP and HTML div tags to connect and manipulate a MySQL database

Struggling with incorporating HTML div tags into a booking system. I have the user input fields for city, date, and pet type set up, but getting lost when it comes to passing this information to a SQL database using PHP. Can someone provide guidance on how ...

phphtmlcsssql

The third @media query for max-width is not functioning as expected in the CSS

Looking to create a responsive card section on my website for various screen sizes. The goal is to display 5 cards per row when the screen width is greater than 1300px, maintain 3 cards per row from 1024px to 1300px, and then switch to only 2 cards per row ...

htmlcssresponsive-designmedia-queries

What is the best way to create a more compact Select component in React?

Working on React's Select component has been quite the challenge for me. I'm in the process of creating a simple dropdown button, also known as a ComboBox, similar to what can be seen on GitHub Insights: https://i.stack.imgur.com/J9Bcd.png Belo ...

javascriptcssreactjsmaterial-uiinline-styles

What is the procedure for adding a JavaScript function to an HTML element that was exclusively created in JavaScript?

I am trying to dynamically change the background color of a row in a table when selecting an object from a dropdown list, but only if the selected number is even. The challenge I am facing is that the objects are created using JavaScript and not directly i ...

javascriptcssfunctionhtml-select

positioning newly generated dropped elements within the DOM structure dynamically

Hello everyone, I have a query related to drag and drop functionality. I am currently working on an application that allows users to create websites using only drag and drop features. I am facing a challenge in implementing a feature where users can drop e ...

javascriptjquerycssangularjsdrag-and-drop

Generate numerous div elements by utilizing ng-repeat

I am trying to generate 'n' red blocks with text (where n represents the number of elements in an array), but unfortunately, I am seeing a blank page. <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/angu ...

javascripthtmlangularjsangularjs-ng-repeat

Removing background color upon clicking a navigation bar link: step-by-step guide

Check out the code I wrote at this link Reza https://codepen.io/vsandeep2516/pen/XWbzPVa. The problem is that when you click on the navigation link, a white patch appears. @sanriot, please take a look at the screenshot below: https://i.sstatic.net/dKdEk. ...

htmlcsstwitter-bootstrap-3bootstrap-4

Ways to recognize when a button has been pressed

I developed my website using the CodeIgniter framework. Here is my personal website On the homepage, if I click on the "landscape" picture (top right) or the "landscape" button in the menu, it takes me to the "landscape" page. However, when I return to t ...

phpjqueryhtmlcsscodeigniter

Creating a consolidated HTML table by extracting and comparing data from various JSON files

Being new to JS and JSON, I am struggling to find a suitable solution that works for me. I have two distinct json files. The first one: players.json contains the following data: { "players": [ { "id": 109191123, "surnam ...

javascripthtmljson

Reasons Child Components in React Native & Redux Are Not Re-rendered with Every State Update

Within my React Native and Redux setup, I have a <NavigationCardStack/> component serving as the root. Whenever the state is updated, the redux-logger correctly displays the new state. However, after a state change, the child component fails to log ...

javascripthtmlreactjsreact-nativeredux

I'm having trouble getting my login page centered when using Semantic UI

Currently, I am working on creating a login page using Semantic UI. However, I am facing an issue where the column is not aligning to the center as intended; instead, it is occupying the entire page. I have attempted to link all the necessary files in the ...

htmlcsssemantic-ui

Utilize the atan2() function to rotate a div so that it follows the movement of the mouse

I am trying to create an effect where the mouse aligns with the top of a div and the div rotates as the mouse moves. The rotation should happen when the top part of the div is in line with the mouse cursor. My goal is to achieve this using the atan2 functi ...

javascriptjqueryhtmlcssmath

Improving Java Performance by frequently replacing one String with another

Currently, I am developing an HttpServlet extension (plugin) for a CMS that is responsible for filtering the HTML response. Within my method filterResponse, I retrieve the requested text/html as a String, which is one of three parameters. The main task a ...

javahtmlstringperformanceoptimization