Svg

saalek110 · Feb 15, 2024

لیست:

saalek110 · Feb 15, 2024

SVG Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

JavaScript:

<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>

یک دایره به رنگ زرد ، با حاشیه باریک سبز رسم می شود.

saalek110 · Feb 15, 2024

What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web
SVG defines graphics in XML format
Each element and attribute in SVG files can be animated
SVG is a W3C recommendation
SVG integrates with other standards, such as CSS, DOM, XSL and JavaScript

SVG Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

saalek110 · Feb 15, 2024

SVG Advantages

Advantages of using SVG over other image formats (like JPEG and GIF) are:

SVG images can be created and edited with any text editor
SVG images can be searched, indexed, scripted, and compressed
SVG images are scalable
SVG images can be printed with high quality at any resolution
SVG images are zoomable
SVG graphics do NOT lose any quality if they are zoomed or resized
SVG is an open standard
SVG files are pure XML

SVG Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

saalek110 · Feb 15, 2024

JavaScript:

<!DOCTYPE html>
<html>
<body>

<svg width="150" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="green" />
  <circle cx="75" cy="50" r="40" fill="yellow" />
  <text x="75" y="60" font-size="30" text-anchor="middle" fill="red">SVG</text>
</svg>

</body>
</html>

saalek110 · Feb 15, 2024

SVG Shapes
SVG has some predefined shape elements that can be used by developers:

JavaScript:

Rectangle <rect>
Circle <circle>
Ellipse <ellipse>
Line <line>
Polyline <polyline>
Polygon <polygon>
Path <path>

SVG Rectangle

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

saalek110 · Feb 15, 2024

JavaScript:

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <rect width="200" height="100" x="100" y="50" rx="20" ry="20" fill="blue" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="400" height="150" xmlns="http://www.w3.org/2000/svg">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:red" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="400" height="180" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="400" height="180" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg width="400" height="180" xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <circle r="45" cx="50" cy="50" stroke="green" stroke-width="3" fill="red" />
</svg>

دایره قرمز ، دورش سبز.

saalek110 · Feb 15, 2024

JavaScript:

<svg height="140" width="500" xmlns="http://www.w3.org/2000/svg">
  <ellipse rx="100" ry="50" cx="200" cy="80"
  style="fill:yellow;stroke:green;stroke-width:3" />
</svg>

بیضی زرد ، دورش سبز.

SVG Ellipse

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

در صفحه بالا ، برنامه چند بیضی هم بود، که من نقل نکردم.

saalek110 · Feb 15, 2024

JavaScript:

<svg height="210" width="300" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:red;stroke-width:2" />
</svg>

خط مایل قرمز.

saalek110 · Feb 15, 2024

JavaScript:

<svg height="100" width="300" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="50" x2="250" y2="50" style="stroke:red;stroke-width:12" />
</svg>

خط ضخیم افقی قرمز.

saalek110 · Feb 15, 2024

JavaScript:

<svg height="210" width="300" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="0" x2="0" y2="200" style="stroke:red;stroke-width:14" />
</svg>

خط قرمز عمودی.

saalek110 · Feb 15, 2024

JavaScript:

<svg height="220" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="200,10 250,190 150,190" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>

saalek110 · Feb 15, 2024

JavaScript:

<svg height="260" width="500" xmlns="http://www.w3.org/2000/svg">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:3" />
</svg>

پلی گون با ۴ نقطه.

saalek110 · Feb 15, 2024

JavaScript:

<svg height="350" width="360" xmlns="http://www.w3.org/2000/svg">
  <polygon points="150,75 258,137 258,262 150,325 42,262 42,137"
  style="fill:lime;stroke:purple;stroke-width:3" />
</svg>