Download svg created by php

Julia152 · September 20, 2021

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();

requinix · September 20, 2021

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>

Sign In

Download svg created by php

Recommended Posts

Julia152

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information