Scale different parts of SVG file differently

In general you can't scale some parts of an SVG differently from others. However there are some simple cases (like the pencil image you linked to) where you can be tricky and construct one that works.

How that pencil works

It starts by defining a <symbol> element for each of the three parts of the pencil: the end, the body, and the sharp end.

It then combines them by adding three child <svg> elements. At the back is the body <symbol> stretched the entire width of the main <svg>. Then the two end cap <svg> elements are placed in front. Each end cap <svg> occupies half of the width. But they have 'preserveAspectRatio` attributes that results in them being aligned to the left and right ends respectively.

If we make the two end parts almost completely translucent, you can see what's going on:

:checked~svg{
    width:500px;
}

<input type="checkbox"/><br/>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<g id="source">
			<rect width="200" height="100" fill="yellow"/>
			<circle cx="50" cy="50" r="40" fill="red"/>
			<rect x="50" y="10" width="100" height="80" fill="orange"/>
			<path d="M150,10L190,50 150,90z" fill="pink"/>
		</g>
		<symbol id="left" viewBox="0 0 50 100" preserveAspectRatio="none">
			<use xlink:href="#source"/>
		</symbol>
		<symbol id="middle" viewBox="50 0 100 100" preserveAspectRatio="none">
			<use xlink:href="#source"/>
		</symbol>
		<symbol id="right" viewBox="150 0 50 100" preserveAspectRatio="none">
			<use xlink:href="#source"/>
		</symbol>
	</defs>
	<svg viewBox="0 0 1 1" preserveAspectRatio="none">
		<use xlink:href="#middle" width="1" height="1"/>
	</svg>
	<svg viewBox="0 0 1 2" preserveAspectRatio="xMinYMid">
		<use xlink:href="#left" width="1" height="2" opacity="0.1"/>
	</svg>
	<svg viewBox="0 0 1 2" preserveAspectRatio="xMaxYMid">
		<use xlink:href="#right" width="1" height="2" opacity="0.2"/>
	</svg>
</svg>

You can see how the body has been stretched to the entire width and how the endcaps are placed at the ends to hide the stretched body.

This trick only works because the pencil has a solid background (the yellow). But I assume you want the perforated ends of you ticket to be transparent, so that trick won't work for you. If you are okay with it being white, then it will.

What's probably simpler for you is the just stack the three parts on top of one another.

<svg>  (the top of the ticket)
<div>  (containing the ticket body contents)
<svg>  (the bottom of the ticket)