Jump to content

Download svg created by php


Julia152
 Share

Recommended Posts

Hello I'm trying to create a download for a svg file that was created before with php. The download and the svg creation works perfectly fine but I don't know how to pass the created svg to the download. I tried to pass the segment value but that doesnt make much sense I guess. So I'm stuck right nw how to pass the created svg to the download. There you can see my code 

 

//INDEX.PHP
<head>
	<title>Segment</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
</head>

<style>
	#svg {
		padding-top: 20px;
	}
</style>
<body>
<div class="container">
	<form method="get">
		<label for="segments">Segmente</label><br/>
		<input type="number" id="segments" name="segment">
		<input type="submit" value="Absenden" name="submit">
	</form>
<?php
session_start();

$getSegment = $_GET['segment'];

$_SESSION['getSegment'] = $getSegment;

if (isset($getSegment) && !empty($getSegment)) {
	function segment_circle($segments) {

		$size = 200;
		$radius = $size / 2;
		$segment_arc = 360 / $segments;
		$segment_mid = ($segment_arc + 180) / 2;

		$generate_arc = function($start_angle, $end_angle) use ($radius, $segment_mid) {

			$start = [
				'x' => $radius + ($radius * cos(($end_angle - $segment_mid) * pi() / 180)),
				'y' => $radius + ($radius * sin(($end_angle - $segment_mid) * pi() / 180))
			];

			$end = [
				'x' => $radius + ($radius * cos(($start_angle - $segment_mid) * pi() / 180)),
				'y' => $radius + ($radius * sin(($start_angle - $segment_mid) * pi() / 180))
			];

			if ($end_angle - $start_angle <= 180) {
				$arc = 0;
			} else {
				$arc = 1;
			}

			//Zeichnet ein Segment
			return implode(' ', [
				'M', $start[ 'x' ], $start[ 'y' ],
				'A', $radius, $radius, 0, $arc, 0, $end[ 'x' ], $end[ 'y' ],
				'L', $radius, $radius, 'Z'
			]);
		};

		?>
			<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" id="svg">
				<?php for ($i = 0; $i < 1; $i++): ?>
					<?php
					$start_angle = $segment_arc * $i;
					$end_angle = $segment_arc * ($i + 1);
					?>
					<path fill="#red" stroke-width="0" d="<?php echo $generate_arc($start_angle, $end_angle) ?>" />
				<?php endfor ?>
			</svg>
		</div>
	<div class="container">
		<button class="btn btn-primary" onclick="location.href='download.php'">Download</button>
	</div>
</body>

<?php
	}
	echo segment_circle($getSegment);
} else if (!isset($getSegment) || empty($getSegment)) {
	echo 'Bitte trag eine Segmentanzahl ein!';
}
//DOWNLOAD.PHP
<?php

session_start();

$getSegment = $_GET['getSegment'];

header('Content-Disposition: attachment; filename="segment.svg');
header('Content-Type: text/plain');
header('Content-Length: ' . strlen($getSegment));
header('Connection: close');

echo $getSegment;

exit();

 

Link to comment
Share on other sites

It would be easier to do this with Javascript, actually, by creating an <a> with the SVG data plus a special "download" attribute.

Example:

<svg id="svg">...</svg>

<div id="download" class="container"></div>

<script>
(function() {
	var a = document.createElement("a");
	a.href = "data:image/svg;base64," + btoa(document.getElementById("svg").outerHTML);
	a.download = "segment.svg";

	document.getElementById("download").appendChild(a);
})();
</script>

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.