render content_type #svg #image/svg+xml

최근 svg를 다룰 일이 있었는데, django에서 svg를 요긴하게 다룰 수 있는 방법이 있어서 글을 올려봅니다.

 

svg의 경우 여기 저기 링크로 embeding 하는데 많이 쓰이는데요,

이와 관련하여 django의 render 에서 content_type에 대해 이야기 해볼까 합니다.

 

django 를 쓰는 분들은 페이지를 호출할때 아래와 같이 render를 많이 이용하실겁니다.

from django.shortcuts import render

 

일반적인 사용예제는 다음과 같을 겁니다.

def test_view(request):
    return render(request, 'test_view.html')

 

backend 쪽에서의 정보를 건네주기 위해 다음과 같은 식으로 context를 활용하기도 합니다.

def test_view(request):
    test_context = 'It is test'
    return render(request, 'test_view.html', {'test_context':test_context})

 

django.shortcuts의 render는 default로 html로 페이지를 그려줍니다.

확인해볼까요?

 

저의 경우 venv에 django를 설치해서 사용하고 있는데요

venv > lib> python3.10 > site-packages > django > shortcuts.py > render 를 타고 들어왔습니다.

render는 content_type을 argument로 받을 수 있는게 보이시나요?

이제 HttpResponse도 타고 들어가봅시다.

 

HttpResponseBase까지 타고 들어가보죠.

content_type 이 None일때    # (아까 render에서 content_type=None으로 default 입력값이 정해져있었죠?)

default content_type이 text/html 인 것을 확인할 수 있습니다.

이 때문에 content_type을 지정해주지 않고 render하는 페이지는 html 태그 안에 담겨서 browser에 그려집니다.

 

html태그 안에 담겨서 그려지는 경우에는 해당 페이지를 image로 다른 사이트 등에 embeding 하는 것이 안됩니다.

 

html처럼 텍스트도 넣고 원하는 곳에 그림도 넣어서 페이지를 만들고 싶고

그 페이지를 다른 곳에 이미지 처럼 넣을 수도 있게 하려면!

svg 형태로 페이지를 render 해주면 됩니다.

 

이때 content_type = 'image/svg+xml' 라는 옵션을 추가해주고 .html 파일을 svg 형태에 맞게 작성해주고 렌더링 해주는 페이지로 지정해주면 됩니다.

 

구체적인 예제코드는 다음과 같습니다.

def svg_test(request)
    return render(request, 'svg_test.html', content_type='image/svg+xml')

svg_test.html은

<svg></svg> 안에 담기는 내용을 작성하면 됩니다.

 

이렇게 생긴 페이지를 browser에서 실행해보면 html tag 없이 svg 태그부터 시작하는 것이 확인이 될겁니다.

그 말은 이 페이지 자체를 이미지 파일처럼 다른 곳에 embeding 이 가능하게 되었다는 얘깁니다.

 

끝