Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 6 views

    SVG_and_Canvas

    Uploaded by

    Ajay Kumar

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    SVG_and_Canvas

    Uploaded by

    Ajay Kumar
    6 views2 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    6 views2 pages

    SVG_and_Canvas

    Uploaded by

    Ajay Kumar

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    You are on page 1of 2

    Canvas and SVG

    Canvas and SVG (Scalable Vector Graphics) are both popular technologies
    used in web development for creating graphics and visualizations, but they
    have different approaches and use cases.

    Introduction to Canvas
    It is a pixel-based drawing surface that is widely used for creating dynamic
    and interactive content on the web.

    Syntax:

    <canvas id="myCanvas" width="width_value" height="height_value"


    style="border:1px solid #000;"></canvas>

    Attributes:
    • id: A unique identifier for the canvas.
    • width: The width of the canvas.
    • height: The height of the canvas.
    • style: Additional styles for the canvas, such as borders or background color.

    HTML Code Output


    <body>
    <h2>Canvas Syntax
    Example</h2>
    <canvas id="myCanvas"
    width="400" height="200"
    style="border:1px solid
    #000;"></canvas>
    </body>

    In this example, a canvas element with an id of "myCanvas" is created


    with a width of 400 pixels and a height of 200 pixels. The style attribute
    adds a black border around the canvas for visibility.

    Scalable Vector Graphics (SVG)


    Scalable Vector Graphics (SVG) is a widely adopted XML-based markup
    language for describing two-dimensional vector graphics. SVG graphics
    are resolution-independent and can be scaled to any size without
    losing clarity.

    1|Page
    Syntax:

    Attributes:
    ● id: Provides a unique identifier for the SVG element.
    ● class: Assigns one or more class names to the SVG element.
    ● style: Specifies inline styles for the SVG element.
    ● fill: Specifies the fill color for the graphic element.
    ● stroke: Defines the color of the element's outline.
    ● stroke-width: Sets the width of the element's outline.
    ● viewBox: Defines the position and dimensions of the SVG content in
    the user coordinate system.
    ● preserveAspectRatio: Specifies how the SVG content should be
    scaled and positioned within the viewport.

    Note: Attributes specific to graphic elements like <circle>, <rect>, <line>,


    etc. are also utilized within SVG markup.

    The cx and cy attributes specify the center coordinates, r is the radius,


    and fill, stroke, and stroke-width control the appearance.

    2|Page

    You might also like