Found 12 Articles for SVG

How can I get the output of a Matplotlib plot as an SVG?

Rishikesh Kumar Rishi
Updated on 17-Mar-2021 08:44:26
Just using the savefig method of the pyplot package and mentioning the file format, we can save the output as a SVG format.StepsCreate fig and ax variables using subplots method, where default nrows and ncols are 1.Create xpoints and ypoints using np.array(0, 5).Plot lines using xpoints and ypoints.Set the X-axis label using plt.xlabel() method.Set the Y-axis label using plt.ylabel() method.To save the file in SVG format, use savefig() method where image name is myImagePDF.svg, format="svg".To show the image, use method.Exampleimport matplotlib.pyplot as plt import numpy as np fig, ax = plt.subplots() xpoints = np.array([0, 5]) ypoints = np.array([0, ... Read More

How to draw on scroll using JavaScript and SVG?

Updated on 08-May-2020 12:48:13
To draw on scroll using JavaScript and SVG, the code is as follows −Example Live Demo    body {       height: 2000px;       background: #f1f1f1;    }    svg {       position: fixed;       top: 15%;       width: 400px;       height: 210px;       margin-left: -50px;    } Scroll Using JavaScript and SVG example    var polygon = document.getElementById("polygon");    var length = polygon.getTotalLength(); = length; = length;    window.addEventListener("scroll", drawPoly);    function ... Read More

Difference between JPEG and SVG

Kiran Kumar Panigrahi
Updated on 11-Jan-2023 15:20:39
JPEG and SVG are types of image formats. JPEG is a raster image format that uses a lossy compression algorithm to compress an image, whereas SVG is a highly scalable, text-based image format that uses mathematical structures to represent an image. JPEG images are used in photography applications, while SVG is used when high-resolution images are required. JPEG is a good choice for photographs and other images with lots of colors, while SVG is a better choice for simple images and graphics that need to be resized, such as logos and icons. Read this article to find out more about ... Read More

Drawing sine waves with HTML5

karthikeya Boyini
Updated on 04-Mar-2020 10:26:09
To draw sine waves with HTML5, use SVG.Use the following that closely approximates half of a sine wave. I have used a cubic bezier approximation.           SVG                     HTML5 SVG Sine Waves                          

HTML5 SVG css3 transition on fill not working when there is external link

Nancy Den
Updated on 30-Jan-2020 06:13:20
This cannot be done through the visited state. The best solution is to add a random query to url so that page go unvisited.

Make a star shape with HTML5 SVG

Lakshmi Srinivas
Updated on 16-Dec-2021 09:39:31
Here is the HTML5 version of an SVG example that would draw a star using the tag.                    #svgelem{             position: relative;             left: 50%;             -webkit-transform: translateX(-40%);             -ms-transform: translateX(-40%);             transform: translateX(-40%);          }             SVG                     HTML5 SVG Star                       Output

Align HTML5 SVG to the center of the screen

Chandu yadav
Updated on 25-Jun-2020 07:07:41
SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.ExampleLet us see an example of SVG −                    #svgelem {             position: relative;             left: 50%;             -webkit-transform: translateX(-20%);             -ms-transform: translateX(-20%);             transform: translateX(-20%);          }             SVG                     HTML5 SVG Circle                           To center it, add the CSS like the following −# svgelem {    margin-left:auto;    margin-right:auto;    display:block; }

How to draw sine waves with HTML5 SVG?

Anvi Jain
Updated on 16-Dec-2021 10:30:46
To draw sine waves with SVG, use the following that closely approximates half of a sine wave. I have used a cubic-bezier approximation. Use the element.Example           SVG                     HTML5 SVG Sine Waves                           Output

How to either determine SVG text box width or force line breaks after 'x' characters?

Krantik Chavan
Updated on 27-Jan-2020 07:26:08
Use the getBBox() function and add a single word at a time to a text object. When it gets too wide, you need to add a line feed.var a = Raphael(500, 500); var b = a.text(100, 100).attr('text-anchor', 'start'); var maxWidth = 100; var content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec semper mauris. Sed gravida augue feugiat nulla ultrices efficitur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed sit amet lobortis eros, et lobortis diam. Aenean arcu velit, condimentum eu lacus in, dignissim bibendum odio. Mauris ultricies nunc et lorem ... Read More

How to use .svg files in a webpage?

Swarali Sree
Updated on 26-Jun-2020 06:33:18
The svg files are Scalable Vector Graphics. You can add it to a web page using the , , or tag.The .svg file is to be referenced in the src attribute of the tag. Let’s see how to add it using the tag.You can try to run the following code to learn how to use .svg files in a web page. We have a smiley.svg file −           HTML SVG               Design