Open In App

SVG media Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

The media attribute shows a media query that must be matched for a style sheet to apply. Only <style> element is using this attribute.

Syntax:

<style media="media-query-list">
    // Styling the element
</style>

Attribute Values: The media attribute accepts the values mentioned above and described below:

  • media-query-list: This value holds a media query which lets the stylesheet  to be applied on the element.

Below examples illustrate the use of media attribute.

Example 1:




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="margin-left: -8px;
        font-size: 25px; color: green;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="0 10 1440 220" 
        xmlns="http://www.w3.org/2000/svg">
  
        <!-- Styling rect element when screen 
            size is greater than 800px -->
        <style>
            rect {
                fill: yellowgreen;
            }
        </style>
  
        <!-- Styling rect element when screen
            size is greater than 800px and 
            using media attribute-->
        <style media="all and (min-width: 800px)">
            rect {
                fill: green;
            }
        </style>
  
        <!-- Defining rectangular shape SVG -->
        <rect y="20" width="200" height="200" />
    </svg>
</body>
  
</html>


Output:

Example 2:




<!DOCTYPE html>
<html>
  
<body>
    <h1 style="margin-left: -8px;
        color: green; font-size: 25px;">
        GeeksforGeeks
    </h1>
      
    <svg viewBox="0 2 1440 220" 
        xmlns="http://www.w3.org/2000/svg">
  
        <!-- Styling rect element when screen
            size is greater than 800px -->
        <style>
            circle {
                fill: yellowgreen;
            }
        </style>
  
        <!-- Styling rect element when screen
            size is greater than 800px and 
            using media attribute-->
        <style media="all and (min-width: 800px)">
            circle {
                fill: green;
            }
        </style>
  
        <!-- Defining circular shape SVG -->
        <circle r="100" cx="100" cy="100" />
    </svg>
</body>
  
</html>


Output:



Last Updated : 31 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads