SVG media Attribute

Last Updated : 19 Jul, 2024

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:

html

<!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:

html

<!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:

SVG numOctaves Attribute

thacker_shahid

Improve

Article Tags :

SVG media Attribute

Similar Reads

SVG Elements

SVG Properties

SVG Attributes

Thank You!

What kind of Experience do you want to share?